natuleadan 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