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