CheatNext.js React web framework
Light · Postcard
102 × 152 mm · PDF
Dark · Postcard
102 × 152 mm · PDF
Ink saver · Postcard
102 × 152 mm · PDF
Light · A4 landscape
297 × 210 mm · PDF
Dark · A4 landscape
297 × 210 mm · PDF
Ink saver · A4 landscape
297 × 210 mm · PDF
Light · A3 landscape
420 × 297 mm · PDF
Dark · A3 landscape
420 × 297 mm · PDF
Ink saver · A3 landscape
420 × 297 mm · PDF
Start here
npx create-next-app@latest <name>
Scaffold an app
npm run devDev server on :3000
npm run buildProduction build
npm run startServe the build
npx next typegen
Generate route types
npx next infoEnv details for bug reports
npx next dev -p <port>
Use another port
npx next upgrade
Move to latest version
Concepts
layout shared shell
template re-mounts on nav
error error boundary
loading
suspense fallback
not-found 404 boundary
page the route UI
Create an app
npx create-next-app@latest <name>
Create a new project
create-next-app --yes
Reuse saved prefs or defaults, no prompts
create-next-app --js
JavaScript instead of TypeScript
create-next-app --src-dir
Put code in src/
create-next-app --biome
Biome as linter
create-next-app --eslint
ESLint as linter
create-next-app --no-linter
Skip linter setup
create-next-app --no-tailwind
Skip Tailwind CSS
create-next-app --api
Route handlers only, no UI
create-next-app --empty
Bare-bones project
create-next-app --react-compiler
Enable React Compiler
create-next-app --webpack
Webpack in generated scripts
create-next-app --import-alias
"<alias>"
Custom import alias (default @/*)
create-next-app --use-pnpm
Pick the package manager (npm, yarn, bun too)
create-next-app --skip-install
Do not install packages
create-next-app --disable-git
No git init
create-next-app --example <name>
Start from an official example
create-next-app --example <github-url>
Start from any public GitHub repo
create-next-app --reset-preferences
Forget stored prompt answers
Dev, build, start
next devDev server with hot reload
next dev -p <port>
Set the port (or PORT env var)
PORT cannot be set in .env: the server starts before env files
load.
next dev -H <host>
Bind a hostname (default 0.0.0.0)
next dev --webpack
Use Webpack instead of Turbopack
next dev --turbopack
Force Turbopack (already default)
next dev --experimental-https
HTTPS with a self-signed cert
next dev --experimental-https-key <path>
Own HTTPS key
next dev --experimental-https-cert <path>
Own HTTPS certificate
next dev --experimental-cpu-prof
Write V8 CPU profile on exit
next dev <directory>
Run an app in another folder
next buildOptimized production build
next build --debug
Verbose output: rewrites, redirects, headers
next build --debug-prerender
Readable prerender errors, keeps going
Debugging only: do not deploy a build made with this flag.
next build --debug-build-paths="<glob>"
Build only matching routes
next build --webpack
Build with Webpack
next build --analyze
Emit bundle analysis data (Turbopack)
next build --profile
Enable React profiling in production
next build --no-mangling
Disable name mangling to debug
next startServe the production build
next start -p <port>
Port for the production server
next start --keepAliveTimeout <ms>
Keep-alive longer than your proxy's
Tools
next --helpList commands and options
next --versionPrint the Next.js version
next infoPrint system and package versions
next info --verbose
Extra debug details
next typegenGenerate route types without a build
next typegen && tsc --noEmit
Type-check routes in CI
next upgradeUpgrade Next.js and its codemods
next upgrade --revision <tag>
Target a version, latest or canary
next analyzeExplore bundle size in the browser
next analyze --output --snapshot <name>
Save analysis to disk, no server
next analyze export --snapshot <name>
Stream a snapshot as JSON lines
next telemetry --disable
Opt out of telemetry
next telemetry --enable
Opt in to telemetry
App Router files
app/layout.tsx
Shared shell; root one needs <html> and <body>
app/page.tsxUI that makes a route public
app/loading.tsxFallback shown while a segment streams
app/error.tsx
Error boundary; must be a client component
app/not-found.tsx
UI for notFound() and unmatched URLs
app/global-error.tsx
Catches errors in the root layout
app/template.tsx
Like layout but remounts on navigation
app/api/<name>/route.ts
Route handler (GET, POST, ...)
app/default.tsxFallback for a parallel-route slot
proxy.ts
Runs before requests; successor of middleware
Renamed from middleware.ts in Next.js 16.
instrumentation.ts
Startup hook for tracing and monitoring
next.config.ts
Framework config (.js and .mjs also work)
public/Static files served from /
icon.png / opengraph-image.png
Metadata files placed in app/
sitemap.ts / robots.ts
Generated SEO files in app/
Route folders
app/blog/page.tsx
Serves /blog
app/blog/[slug]/page.tsx
Dynamic segment
app/shop/[...slug]/page.tsx
Catch-all segment
app/docs/[[...slug]]/page.tsx
Optional catch-all, also matches /docs
app/(marketing)/page.tsx
Route group: name not in the URL
app/blog/_lib/Private folder, never routed
app/@sidebar/page.tsx
Named slot (parallel route)
app/feed/(.)photo/[id]/page.tsx
Intercept a sibling route
(..)photo / (..)(..)photo / (...)photo
Intercept parent, two up, or from root
Environment
.envDefaults for every environment
.env.localLocal secrets; keep out of git
.env.development
Loaded by next dev
.env.productionLoaded by next build and start
NEXT_PUBLIC_<NAME>=value
Inlined into browser code at build time
Changing it later needs a rebuild.
process.env.<NAME>
Read a variable on the server
Recipes
npx create-next-app@latest my-app --yescd my-appnpm run dev# open http://localhost:3000npm cinpx next typegen && npx tsc --noEmitnpx next buildnpx next dev --experimental-https -p 4000# https://localhost:4000npx next build --debug-prerendernpx next build --debug-build-paths="app/blog/**/page.tsx"
