Next.js Guide 2026: App Router, RSC, and Beyond
A modern Next.js guide — App Router, Server Components, caching, streaming, and shipping to Vercel in 2026.
App Router Basics
File-based routing under /app.
layout.tsx wraps route segments (nested layouts).
page.tsx = route handler for that URL.
loading.tsx + error.tsx + not-found.tsx for boundaries.
Server vs Client Components
Server Components by default — zero JS to client.
'use client' opts in to hydration for interactive components.
Server → Client: pass data as props (serializable only). Client → Server: Server Actions.
Data Fetching
fetch() in Server Components is deduped and cached by default.
Use { cache: 'no-store' } for dynamic, { next: { revalidate: N } } for ISR.
revalidateTag/revalidatePath for on-demand revalidation.
Next.js caching layers
| Layer | Controls | Invalidate with |
|---|---|---|
| Request memoization | Dedupes fetches in same render | Automatic |
| Data cache | Persisted fetch cache | revalidateTag / revalidate |
| Full route cache | Rendered HTML cache | revalidatePath |
| Router cache (client) | Client-side segment cache | router.refresh() |
Server Actions
'use server' functions callable from Client Components.
Great for form submissions with progressive enhancement.
Use with useFormState/useFormStatus for pending/error UI.
Streaming + Suspense
Wrap slow components in <Suspense fallback={...}>.
Next streams HTML as data resolves — instant TTFB even with slow fetches.
Performance
Static rendering when possible; ISR for revalidatable pages.
Image component (next/image) for auto-optimization.
Font component (next/font) for zero-CLS fonts.
Deployment
Vercel: zero-config, best DX, edge functions, ISR built-in.
Cloudflare Workers via @opennextjs/cloudflare.
Self-host on Node via next start.
Frequently Asked Questions
App Router or Pages Router in 2026?+
App Router. Pages is maintained but not the future — start new projects on App.
Is Next.js overkill for a small site?+
For a marketing site, static generation is fast and free. For dynamic apps, RSC + streaming are hard to beat.
Server Actions or API routes?+
Server Actions for form-driven mutations. API routes for public APIs and webhooks.
What about Turbopack?+
Stable in dev; production builds still use Webpack for many projects. Turbopack prod is rolling out through 2025-2026.
Can I deploy Next.js outside Vercel?+
Yes — Node.js self-host, Docker, or Cloudflare Workers via OpenNext. Vercel remains the smoothest experience.