NextJS Cheat Sheet

Updated 2026-07-16

Next Topic: Nuxt.js Framework Cheat Sheet

🎯Take a practice test on this topic8 practice tests · 254 questions→

🧠Study flashcards on this topic138 cards · spaced repetition→

Next.js is a production-ready React framework built by Vercel that enables server-side rendering, static site generation, and full-stack capabilities through a file-system-based router. It extends React with powerful features like automatic code splitting, image and font optimization, built-in API routes, and support for both the App Router (with React Server Components) and the Pages Router. As of Next.js 15/16, the framework shifted to explicit opt-in caching: fetch requests are no longer cached by default, and the new use cache directive with cacheTag/cacheLife APIs provide fine-grained cache control. Understanding that Next.js blurs the line between client and server is crucial: components run on the server by default in App Router, while "use client" enables interactivity exactly where needed.

What This Cheat Sheet Covers

This topic spans 25 focused tables and 204 indexed concepts, 138 flashcards, 8 practice tests with 254 questions. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.

Table 1: Project Setup and InitializationTable 2: App Router File ConventionsTable 3: Pages Router PatternsTable 4: Dynamic Routes and SegmentsTable 5: Server and Client ComponentsTable 6: Data Fetching PatternsTable 7: Rendering StrategiesTable 8: Caching and PerformanceTable 9: Routing and NavigationTable 10: Metadata and SEOTable 11: Middleware and EdgeTable 12: Image and Font OptimizationTable 13: API Routes and Route HandlersTable 14: Server Actions and FormsTable 15: Configuration OptionsTable 16: Environment VariablesTable 17: Hooks and Client APIsTable 18: Testing StrategiesTable 19: Authentication PatternsTable 20: Internationalization (i18n)Table 21: Styling ApproachesTable 22: Deployment OptionsTable 23: Advanced PatternsTable 24: Performance OptimizationTable 25: Error Handling and Debugging

Quick IndexSubscribe to unlock

A jump-to index of every table row in this cheat sheet.

Mind MapSubscribe to unlock

An interactive map of every table and concept in this topic.

Table 1: Project Setup and Initialization

Everything starts here: the commands that scaffold a new app, run the dev server, and produce a production build. Two of these shifted recently. Turbopack is now the default bundler for both next dev and next build, and static export is a setting in next.config.ts rather than the old standalone next export command.

Command	Example	Description
create-next-app	`npx create-next-app@latest my-app`	Scaffolds a new Next.js project in a new folder, prompting for TypeScript, linter, Tailwind, and App Router, then installing dependencies.
Development server	`npm run dev`	Starts the development server on `http://localhost:3000` with Fast Refresh, which applies edits while keeping component state.
Production build	`npm run build`	Builds the application for production. Optimizes bundles, type-checks the project, and prerenders static routes.
Production server	`npm start`	Serves the production build. Requires `next build` first, and does not work with `output: 'export'`.
Manual installation	`npm install next@latest react@latest react-dom@latest`	Installs Next.js into an existing project. Also requires adding the `dev`/`build`/`start` scripts and creating `app/layout.tsx` plus `app/page.tsx`.
TypeScript setup	`mv app/page.js app/page.tsx` `npm run dev`	Bootstraps TypeScript support. Rename any file to `.ts`/`.tsx`, and Next.js installs the dependencies and writes `tsconfig.json` on the next `dev` or `build`.
Turbopack dev	`next dev`	• Rust-based incremental bundler built into Next.js, the dev default since Next.js 16 • opt out with `next dev --webpack`.
Turbopack build	`next build`	• Also the production-build default since Next.js 16, stable after a 15.5 beta • 2-5x faster builds; opt out with `next build --webpack`.
Static export	`output: 'export'` in `next.config.ts`	• Generates fully static output into the `out/` folder, one HTML file per route • set in config, then run `next build`. The `next export` command was removed in Next.js 14.

Table 2: App Router File Conventions

In the App Router the file name is the API. A folder in app/ is only a URL once you drop a page.tsx in it, a layout.tsx shares UI without re-rendering, and a loading.tsx earns you a Suspense boundary you never wrote. These reserved filenames are the vocabulary every route is built from, so it pays to know exactly what each one does and where it sits in the tree.

Convention	Example	Description
page.tsx	`app/dashboard/page.tsx`	• Defines the UI for a route and makes the segment publicly accessible • must default export a React component • a folder without one is never a URL.

The rest of this section is part of the full cheat sheet

Table 3: Pages Router Patterns

The older Pages Router fetches data through exported lifecycle functions rather than async components: getStaticProps for build-time data, getServerSideProps for per-request data, and getStaticPaths to enumerate dynamic routes. None of these exist in the App Router, so the mental model does not carry over. If you're maintaining or migrating an existing app, this is the model to keep straight; new projects should reach for the App Router instead.

Pattern	Example	Description
getStaticProps	`export async function getStaticProps(ctx) {` `return { props: { data } }` `}`	• Fetches data at build time for SSG, passing props to the page component • always runs on the server, never on the client, and is stripped from the browser bundle, so direct database queries are safe here • the returned `props` ARE visible in the initial HTML.

The rest of this section is part of the full cheat sheet

Table 4: Dynamic Routes and Segments

Bracketed folder names turn URL segments into parameters, and the exact bracket syntax decides how greedily a route matches: [slug] grabs exactly one segment, [...slug] grabs all of them, and [[...slug]] also matches the bare parent route. This table also covers the advanced moves (route groups, parallel routes, intercepting routes) plus the Next.js 15 change that makes params a Promise you must await.

Pattern	Example	Description
Dynamic segment	`app/blog/[slug]/page.tsx`	• Creates a route with one dynamic parameter, passed to the page as `params.slug` • fills exactly ONE segment: matches `/blog/hello`, not `/blog/hello/world` • typed `string`.

The rest of this section is part of the full cheat sheet

Table 1: Project Setup and Initialization

Command	Example	Description
create-next-app	`npx create-next-app@latest my-app`	Scaffolds a new Next.js project in a new folder, prompting for TypeScript, linter, Tailwind, and App Router, then installing dependencies.
Development server	`npm run dev`	Starts the development server on `http://localhost:3000` with Fast Refresh, which applies edits while keeping component state.
Production build	`npm run build`	Builds the application for production. Optimizes bundles, type-checks the project, and prerenders static routes.
Production server	`npm start`	Serves the production build. Requires `next build` first, and does not work with `output: 'export'`.
Manual installation	`npm install next@latest react@latest react-dom@latest`	Installs Next.js into an existing project. Also requires adding the `dev`/`build`/`start` scripts and creating `app/layout.tsx` plus `app/page.tsx`.
TypeScript setup	`mv app/page.js app/page.tsx` `npm run dev`	Bootstraps TypeScript support. Rename any file to `.ts`/`.tsx`, and Next.js installs the dependencies and writes `tsconfig.json` on the next `dev` or `build`.
Turbopack dev	`next dev`	• Rust-based incremental bundler built into Next.js, the dev default since Next.js 16 • opt out with `next dev --webpack`.
Turbopack build	`next build`	• Also the production-build default since Next.js 16, stable after a 15.5 beta • 2-5x faster builds; opt out with `next build --webpack`.
Static export	`output: 'export'` in `next.config.ts`	• Generates fully static output into the `out/` folder, one HTML file per route • set in config, then run `next build`. The `next export` command was removed in Next.js 14.

Table 2: App Router File Conventions

Convention	Example	Description
page.tsx	`app/dashboard/page.tsx`	• Defines the UI for a route and makes the segment publicly accessible • must default export a React component • a folder without one is never a URL.

Table 3: Pages Router Patterns

Pattern	Example	Description
getStaticProps	`export async function getStaticProps(ctx) {` `return { props: { data } }` `}`	• Fetches data at build time for SSG, passing props to the page component • always runs on the server, never on the client, and is stripped from the browser bundle, so direct database queries are safe here • the returned `props` ARE visible in the initial HTML.

Table 4: Dynamic Routes and Segments

Pattern	Example	Description
Dynamic segment	`app/blog/[slug]/page.tsx`	• Creates a route with one dynamic parameter, passed to the page as `params.slug` • fills exactly ONE segment: matches `/blog/hello`, not `/blog/hello/world` • typed `string`.

Next.js Cheat Sheet

Table 1: Project Setup and Initialization

Table 2: App Router File Conventions

Table 3: Pages Router Patterns

Table 4: Dynamic Routes and Segments

Next.js Cheat Sheet

Table 1: Project Setup and Initialization

Table 2: App Router File Conventions

Table 3: Pages Router Patterns

Table 4: Dynamic Routes and Segments