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)
Page
app/page.tsx → /Nested
app/blog/page.tsx → /blogDynamic
app/blog/[slug]/page.tsxCatch-all
app/docs/[...slug]/page.tsxRoute group
app/(marketing)/about/page.tsxLayout
app/layout.tsxLoading
app/loading.tsxError
app/error.tsxNot found
app/not-found.tsxData Fetching
Server fetch
const data = await fetch(url)No cache
fetch(url, { cache: 'no-store' })Revalidate
fetch(url, { next: { revalidate: 60 } })generateStaticParams
export async function generateStaticParams() { }Metadata
Static
export const metadata: Metadata = { title: '...' }Dynamic
export async function generateMetadata({ params }) { }OG image
opengraph-image.tsx in route folderSitemap
app/sitemap.tsRobots
app/robots.tsServer Actions
Define
'use server'
async function submit(formData: FormData) { }Use in form
<form action={submit}>...</form>useFormStatus
const { pending } = useFormStatus()API Routes
Route handler
app/api/route.ts → GET, POSTDynamic
app/api/[id]/route.tsRequest
export async function GET(req: NextRequest) { }Response
return NextResponse.json({ data })Client vs Server
Client comp
'use client' at top of fileServer comp
Default — no directive neededDynamic import
const Comp = dynamic(() => import('./Comp'))