The Next.js Guide

Next.js is a React framework. It gives you everything React doesn’t: routing, server-side rendering, API endpoints, image optimization, and a production build system.

It’s the most popular way to build React applications today. If you know React and want to ship real projects, Next.js is the natural next step.

This page is your starting point for Next.js on this site. I organized the best posts into a learning path, then grouped the rest by theme so you can find what you need.

Next.js 16 is the current major version, and new projects use the App Router. It has been the recommended way to build Next.js apps since version 13.4. A new create-next-app project gets the App Router, TypeScript, Tailwind and ESLint by default, with Turbopack as the bundler.

Most of the posts listed here were written for the Pages Router, the original routing system based on the pages folder. The Pages Router still works and runs many existing apps, so these posts help when you maintain one. For App Router code, read how to get the request headers in the App Router and how to pass an id to a server action.

Where to start

Follow these in order if you’re new to Next.js:

1. How to install Next.js gets your first project running
2. Linking two pages in Next.js using Link covers client-side navigation
3. Dynamic content in Next.js with the router shows how to build pages from dynamic data
4. How to use the Next.js Router goes deeper into routing
5. How to use Next.js API Routes lets you build backend endpoints inside the same project
6. View source to confirm SSR is working in Next.js helps you understand what server-side rendering actually does

If you’re wondering how Next.js compares to the alternatives, read Next.js vs Gatsby vs create-react-app. It’s an older comparison. The React team deprecated create-react-app on February 14, 2025, and now recommends starting new apps with a framework like Next.js.

Routing and navigation

The router is the heart of Next.js. These posts cover the patterns you’ll use constantly:

• How to programmatically change a route in Next.js
• Using the router to detect the active link in Next.js
• Prefetching content in Next.js
• How to force a page refresh in Next.js
• Next.js, how to open a link in a new window

Data and rendering

How to feed data to your pages, and how to control where code runs:

• Feed data to a Next.js component using getInitialProps, the original Pages Router way of loading data
• Run code only on server or client in Next.js
• How to get cookies server-side in a Next.js app
• Cache data globally in Next.js at build time
• How to parse Markdown in Next.js
• How to fix error serializing Date object JSON in Next.js

Building real features

Practical recipes for things every app needs:

• Next.js Email Authentication using NextAuth
• How to upload files in a Next.js form
• How to add ReCaptcha to a Next.js form
• How to add Google Analytics 4 to Next.js
• Styling Next.js components using CSS
• Adding a wrapper component to your Next.js app
• Next.js: populate the head tag with custom tags
• How I set up a Next.js project structure

Fixing common errors

Next.js errors can be cryptic. These posts cover the ones I hit most often:

• Fix the ‘module not found’ error in Next.js
• Fix Next.js component state not refreshing on navigation
• Blank page after router.push() in Next.js?
• Fix ‘PrismaClient is unable to be run in the browser’ in Next.js
• Fix Tailwind ‘unable to resolve dependency tree’ in Next.js

Going to production

When it’s time to ship:

• Deploying a Next.js app in production
• How to analyze the Next.js app bundles
• Lazy loading modules in Next.js
• Revalidation and ISR gotcha on Vercel

Go deeper

For a structured walkthrough of the framework, download the free Next.js Pages Router Handbook. It covers the Pages Router, the same approach most posts on this page use.

Next.js builds on React, so solid React fundamentals pay off double here. My free React course gives you that foundation.

Everything I wrote about Next.js is in the next tag.

Want me to talk about your product? You can sponsor this site.