Next.js Cheatsheet - Next.js Framework Reference

For React developers building full-stack apps who must decide between SSR and SSG. The core of Next.js is not a list of APIs but clarifying who renders on the server, what interacts on the client, and when data goes stale — server components cannot attach onClick, and ISR serves cached data that can lag behind. By the end you can build a practical App Router page and layout, draw the client/server component boundary, weigh static generation vs ISR, and handle middleware and data fetching.

Web Services·43 commands·Last updated 2026-07-21

App Router Basics 5

app/page.tsx

Page component, Server Component by default

app/layout.tsx

Root or nested layout, wraps child pages

app/loading.tsx

Loading UI, shown automatically with Suspense

app/error.tsx

Error boundary UI, catches runtime errors

app/not-found.tsx

404 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-only

Ensure 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 = 3600

Page-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.tsx

Parallel route slot, independently rendered area

app/(...)/[...slug]/page.tsx

Intercepting route, intercepts external links within current layout

template.tsx

Template component, similar to layout but remounts on navigation

API & Middleware 6

app/api/route.ts

Route Handler, create API endpoints

export async function GET(request)

Handle GET request in Route Handler

middleware.ts

Middleware 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_URL

Client env vars, exposed with NEXT_PUBLIC_ prefix

next build

Production build, generates optimized code and static assets

next start

Start 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

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

MDN Web Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.