Next.js Cheatsheet - Next.js Framework Reference
Essential Next.js full-stack React framework APIs from routing to data fetching, rendering strategies to middleware. Organized by category, copy directly when coding.
Back to Web ServicesApp Router Basics 5
app/page.tsxPage component, Server Component by default
app/layout.tsxRoot or nested layout, wraps child pages
app/loading.tsxLoading UI, shown automatically with Suspense
app/error.tsxError boundary UI, catches runtime errors
app/not-found.tsx404 page, shown when route is not found
Data Fetching 6
fetch(url, { cache: "force-cache" })Static data fetching, default caching strategy
fetch(url, { cache: "no-store" })Dynamic data fetching, fresh on every request
fetch(url, { next: { revalidate: 60 } })ISR incremental static regeneration, revalidate after 60s
generateStaticParams()Generate static paths for dynamic routes
"use server"Mark server actions, callable from client forms
server-onlyEnsure code only runs on server, never leaks to client
Rendering Strategies 5
export const dynamic = "force-static"Force static rendering, HTML generated at build time
export const dynamic = "force-dynamic"Force dynamic rendering, generated per request
export const revalidate = 3600Page-level ISR interval in seconds
"use client"Mark as Client Component, use browser APIs and interactivity
export const runtime = "edge"Use Edge Runtime, lower latency
Layout & Templates 5
export const metadata = { title: "Page Title" }Static metadata, supports title/description/OG
export async function generateMetadata()Dynamic metadata generation, receives params and searchParams
app/@modal/default.tsxParallel route slot, independently rendered area
app/(...)/[...slug]/page.tsxIntercepting route, intercepts external links within current layout
template.tsxTemplate component, similar to layout but remounts on navigation
API & Middleware 6
app/api/route.tsRoute Handler, create API endpoints
export async function GET(request)Handle GET request in Route Handler
middleware.tsMiddleware file, runs before requests for routing decisions
NextResponse.redirect(new URL("/login", request.url))Redirect request in middleware
NextResponse.next()Continue request processing in middleware
cookies().get("token")Read cookies on server
Static Assets & Optimization 5
import Image from "next/image"Optimized Image component, lazy loading and WebP auto-conversion
import { Inter } from "next/font/google"Google Font optimization, self-hosted to avoid external requests
import Script from "next/script"Script loading optimization, supports afterInteractive/lazyOnload strategies
export const metadata = { robots: { index: true, follow: true } }SEO crawler configuration
<Link href="/about" prefetch={true}>Link auto-prefetch, loads page resources on hover
Deployment & Configuration 5
output: "standalone"Standalone deployment output, includes dependencies, ideal for Docker
output: "export"Static export to plain HTML/CSS/JS, deployable to any static host
process.env.NEXT_PUBLIC_API_URLClient env vars, exposed with NEXT_PUBLIC_ prefix
next buildProduction build, generates optimized code and static assets
next startStart production server, reads .next directory build output
💡 Tips
- App Router is the default routing solution in Next.js 13+, replacing Pages Router
- Page components are Server Components by default, add "use client" for client-side interactivity
- Use next/link Link component instead of a tags for automatic prefetching and client-side navigation
- Fetch data directly in Server Components with async/await, no useEffect needed
- Use generateStaticParams for static generation of dynamic routes
Official References
Commands are compiled from the official docs below. Click to verify the latest usage.
Maintained by LaoHand
Publicly updated on Jul 21, 2026, continuously proofread against official docs.
Found an error? Report it
Wrong command or description? Open an issue to help us fix it.
Found an error? Report it