#5: Next.js Website, Securing Apps, RSC Misconceptions, Million.js, Edge Database

Crafting the Next.js Website – If you haven't already noticed, Next.js has recently launched a new website, showcasing an impressive attention to detail. Rauno, an Engineer at Vercel, takes us on a behind-the-scenes journey of building the page and provides a breakdown of the design and the actual frontend techniques used.

Securing your Next.js 13 application – Learn how to improve the security of your Next.js applications. This article covers topics such as security headers, including Content Security Policy, Referrer-Policy, and X-Frame-Options, as well as how to prevent CSRF-attacks.

Display a view counter on your blog with RSCs – I absolutely love it when complex concepts are broken down into bite-sized pieces that are easy to understand and apply. This article by Sebastien does exactly that by using the simple example of a view counter component to explain how to use React Server Components, Streaming and Suspense with Next.js.

The state of type-safe data fetching – A comparison of the different ways to achieve type-safe data fetching in Next.js, Remix, and tRPC.

🎥 How To Fix Next.js 13's N+1 Problem – Learn about the N+1 anti-pattern and how to avoid it when using React Server Components in Next.js

🎥 Explaining some RSC misconceptions – In this video Christopher goes through a quiz about Server Components that Dan Abramov recently posted on Twitter and explains the answer to each question.

🎥 Building a ChatGPT Plugin with TypeScript and Next.js – Nader Dabit shows you how to build a ChatGPT from scratch using Next.js and TypeScript.

Million.js – Make your React components rendering up to 70% faster just by wrapping them with one function. The latest release comes with support for Next.js

Taxonomy – This is an experimental project to see how a modern app (with features like authentication, subscriptions, etc.) would work in Next.js 13 using Server Components and App Router. I think it serves as a great reference for how to use these new features in a Next.js app.

next-sitemap – Simplify sitemap and robots.txt generation for static/pre-rendered/dynamic/server-side pages.

SST – If you are planning to leave Vercel and run your Next.js based stack on AWS, you should check this out. SST simplifies working with AWS and makes it easier to deploy your Next.js apps there.

What the Data Edge is good for – Learn about Turso, a new full SQL database built for the Data Edge as a solution to high latency when querying a database from an edge function

Detailed deployment summaries – Vercel now provides more detailed views of infrastructure primitives in deployment summaries. This allows you to track how changes in their frontend code impact the build's output, including runtimes, regions, and paths used by Vercel during deployment.

The Acronyms of Rendering on the Web – If you're feeling a bit overwhelmed with all the acronyms and initialisms in web development this article is for you. It breaks down the acronyms related to rendering such as CSR, SSR, SSG, etc. and explains the benefits and drawbacks of each method and their suitability for different types of web pages.

How We Sped Up Serverless Cold Starts with Prisma by 9x – Learn how Prisma improved one of the major issues developers face when building data-driven applications in serverless environments: Cold starts when using Prisma ORM

I recently shared a meme on the Next.js subreddit that caught a lot of attention - it went semi-viral! The best part, Lee Robinson joined the thread and dropped some intel about the upcoming Vercel Ship event and the stability of the App Router. Take a look at the post and see for yourself!