Next.js 16 Framework

Overview

Next.js 16 patterns covering async Request APIs, Server/Client Components, React Compiler, App Router conventions, caching with 'use cache', metadata and SEO, SWC compiler optimization, Server Actions, and common anti-patterns.

Quick Reference

Async APIs

All Request APIs must be awaited in Next.js 16: params, searchParams, cookies(), headers(), draftMode().

Rendering

Server Components by default. 'use client' only for interactivity, pushed to leaf components.

Caching

'use cache'
cacheTag('products')
cacheLife({ expire: 3600 })

Invalidation: revalidateTag(), updateTag() (read-your-writes), revalidatePath().

Routing

App Router files: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx, proxy.ts (replaces middleware.ts in Next.js 16).

React Compiler

// next.config.ts
experimental: { reactCompiler: true }

Auto-memoization, fine-grained reactivity. Turbopack is the default bundler.

Server Actions

'use server'
import { revalidateTag } from 'next/cache'

export async function updateAction(data) {
  await db.update(data)
  revalidateTag('products')
}

References

• Async APIs — Awaitable Request APIs pattern
• Rendering Patterns — Server vs Client Components
• Caching Strategy — 'use cache', cacheTag, invalidation
• Routing Conventions — App Router files, proxy.ts, slots
• Performance Compiler — React Compiler + Turbopack
• Metadata SEO — generateMetadata, OG images, JSON-LD
• Anti-Patterns — 6 common Next.js 16 mistakes
• Compiler Options — SWC optimization, removeConsole, tree-shaking
• Server Actions — Server Actions patterns, auth, redirects
• MPP Payment Middleware — HTTP 402 payments for route handlers
• Proxy Locale Detection — Locale detection in proxy.ts, redirect, [lang] routes
• Code Examples — Full working examples
• Quick Reference — Architecture overview card