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 202 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Project Setup and Initialization
| Command | Example | Description |
|---|---|---|
npx create-next-app@latest my-app | Scaffolds a new Next.js project with TypeScript, ESLint, Tailwind, and App Router options — fastest way to start. | |
npm run dev | Starts the development server on http://localhost:3000 with hot module replacement and Fast Refresh. | |
npm run build | Builds the application for production — optimizes bundles, runs type checking, generates static pages. | |
npm start | Starts the production server after build — requires next build first. | |
npm install next@latest react@latest react-dom@latest | Installs Next.js into an existing project — requires creating app or pages directory and adding scripts to package.json. |