Server Actions Replace Most API Routes

Server Actions let client components call server-side functions directly without writing a separate API endpoint. ts // app/actions.ts 'use server' export async function createComment(formData: FormData) { const text = formData.get('text') as string await db.comments.insert({ text, userId: await getAuthUser() }) revalidatePath('/posts') } tsx // Client component <form action={createComment} <input name="text" / <button type="submit"Post</button </form With React 19's useActionState, you get pending state and error handling with minimal boilerplate. API routes (app/api/) are still useful when you need an endpoint consumed by external clients, mobile apps, or third-party webhooks. ---

Partial Prerendering: The Architecture Shift

PPR is the biggest architectural change in Next.js 16 complete picture. It lets one route combine: 1. A static shell prerendered at build time and served from CDN edge 2. Dynamic holes that stream in after the shell is delivered Enable it: ts // next.config.ts export default { experimental: { ppr: true, }, } Mark dynamic parts with Suspense: tsx import { Suspense } from 'react' import { UserCart } from './user-cart' // reads cookies → dynamic export default function ShopPage() { return ( <main <StaticHero / {/ static, prerendered /} <Suspense fallback={<CartSkeleton /} <UserCart / {/ dynamic, streams in /} </Suspense </main ) } Without PPR, reading a cookie in any component on the page forces the entire route to be dynamic. PPR eliminates that penalty. ---

TypeScript and Config Setup

Next.js 16 ships with a typed config file by default: ts // next.config.ts (not .js) import type { NextConfig } from 'next' const config: NextConfig = { images: { remotePatterns: [{ hostname: 'cdn.example.com' }], }, experimental: { ppr: true, }, } export default config Strict TypeScript setup worth enabling: json // tsconfig.json { "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true, "paths": { "@/": ["./src/"] } } } noUncheckedIndexedAccess catches array index bugs that strict mode misses. Enable it on new projects; retrofit carefully on existing ones. ---

Performance Checklist

Before deploying to production, verify: - next build output table shows no route unexpectedly large (200KB first load JS) - Dynamic imports (next/dynamic) used for heavy client components - next/image wrapping every <img — automatic WebP/AVIF conversion, lazy loading, CLS prevention - next/font for all fonts — self-hosted, zero layout shift - Suspense boundaries placed above any component that fetches data - generateStaticParams used for dynamic routes with known IDs (PDPs, blog posts) Run npx @next/bundle-analyzer to visualize what's in your bundles. The common offender: a charting library imported in a Server Component that should be client-only. ---

Vercel (zero config): bash vercel --prod Vercel natively supports PPR, ISR, edge middleware, and Server Actions with no additional configuration. Self-hosted (Node.js server): bash next build node server.js # or: next start Self-hosting loses automatic edge cache invalidation — you need a CDN in front and manual purge calls. Vercel, Netlify, and Cloudflare Workers all support Next.js to varying degrees; check PPR support specifically if you use it. Docker: dockerfile FROM node:20-alpine AS builder WORKDIR /app COPY . . RUN npm ci && npm run build FROM node:20-alpine WORKDIR /app COPY --from=builder /app/.next/standalone ./ CMD ["node", "server.js"] Enable output: 'standalone' in next.config.ts to get a minimal production bundle. ---

Next.js 16 Complete

Q: Partial Prerendering: The Architecture Shift

PPR is the biggest architectural change in Next.js 16 complete picture. It lets one route combine: 1. A static shell prerendered at build time and served from CDN edge 2. Dynamic holes that stream in after the shell is delivered Enable it: ts // next.config.ts export default { experimental: { ppr: true, }, } Mark dynamic parts with Suspense: tsx import { Suspense } from 'react' import { UserCart } from './user-cart' // reads cookies → dynamic export default function ShopPage() { return ( <main <StaticHero / {/ static, prerendered /} <Suspense fallback={<CartSkeleton /} <UserCart / {/ dynamic, streams in /} </Suspense </main ) } Without PPR, reading a cookie in any component on the page forces the entire route to be dynamic. PPR eliminates that penalty. ---

Q: TypeScript and Config Setup

Next.js 16 ships with a typed config file by default: ts // next.config.ts (not .js) import type { NextConfig } from 'next' const config: NextConfig = { images: { remotePatterns: [{ hostname: 'cdn.example.com' }], }, experimental: { ppr: true, }, } export default config Strict TypeScript setup worth enabling: json // tsconfig.json { "compilerOptions": { "strict": true, "noUncheckedIndexedAccess": true, "paths": { "@/": ["./src/"] } } } noUncheckedIndexedAccess catches array index bugs that strict mode misses. Enable it on new projects; retrofit carefully on existing ones. ---

Q: Performance Checklist

Before deploying to production, verify: - next build output table shows no route unexpectedly large (200KB first load JS) - Dynamic imports (next/dynamic) used for heavy client components - next/image wrapping every <img — automatic WebP/AVIF conversion, lazy loading, CLS prevention - next/font for all fonts — self-hosted, zero layout shift - Suspense boundaries placed above any component that fetches data - generateStaticParams used for dynamic routes with known IDs (PDPs, blog posts) Run npx @next/bundle-analyzer to visualize what's in your bundles. The common offender: a charting library imported in a Server Component that should be client-only. ---

Q: Deploying Next.js 16

Vercel (zero config): bash vercel --prod Vercel natively supports PPR, ISR, edge middleware, and Server Actions with no additional configuration. Self-hosted (Node.js server): bash next build node server.js # or: next start Self-hosting loses automatic edge cache invalidation — you need a CDN in front and manual purge calls. Vercel, Netlify, and Cloudflare Workers all support Next.js to varying degrees; check PPR support specifically if you use it. Docker: dockerfile FROM node:20-alpine AS builder WORKDIR /app COPY . . RUN npm ci && npm run build FROM node:20-alpine WORKDIR /app COPY --from=builder /app/.next/standalone ./ CMD ["node", "server.js"] Enable output: 'standalone' in next.config.ts to get a minimal production bundle. ---

Next.js 16 Complete Guide 2026 TL;DR. Next.js 16 ships with the App Router as the only supported model, React 19 as the baseline, and first-class Partial Prerendering that eliminates most SSR vs. static tradeoffs. If you're starting a new project in 2026, this is the stack. If you're on Pages Router, the migration path is well-documented and worth doing. --- What Actually Changed in Next.js 16 Th…

All guides

Related guides

How to Use v0 2026: Complete Guide
Kubernetes
Docker Complete
Vector DBs
PostgreSQL