All Cheat Sheets

Next.js Cheat Sheet

Next.js App Router quick reference — routing, data fetching, metadata, middleware, server actions, and caching.

Routing (App Router)

Pageapp/page.tsx → /
Nestedapp/blog/page.tsx → /blog
Dynamicapp/blog/[slug]/page.tsx
Catch-allapp/docs/[...slug]/page.tsx
Route groupapp/(marketing)/about/page.tsx
Layoutapp/layout.tsx
Loadingapp/loading.tsx
Errorapp/error.tsx
Not foundapp/not-found.tsx

Data Fetching

Server fetchconst data = await fetch(url)
No cachefetch(url, { cache: 'no-store' })
Revalidatefetch(url, { next: { revalidate: 60 } })
generateStaticParamsexport async function generateStaticParams() { }

Metadata

Staticexport const metadata: Metadata = { title: '...' }
Dynamicexport async function generateMetadata({ params }) { }
OG imageopengraph-image.tsx in route folder
Sitemapapp/sitemap.ts
Robotsapp/robots.ts

Server Actions

Define'use server' async function submit(formData: FormData) { }
Use in form<form action={submit}>...</form>
useFormStatusconst { pending } = useFormStatus()

API Routes

Route handlerapp/api/route.ts → GET, POST
Dynamicapp/api/[id]/route.ts
Requestexport async function GET(req: NextRequest) { }
Responsereturn NextResponse.json({ data })

Client vs Server

Client comp'use client' at top of file
Server compDefault — no directive needed
Dynamic importconst Comp = dynamic(() => import('./Comp'))

Keep the references coming

One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.