Series · 10 parts

Next.js 16 from Zero to Senior

Go from zero to senior on the latest Next.js (16): the App Router mental model, Server Components and data fetching, the new Cache Components & "use cache" model, Server Actions, route handlers and proxy, rendering, SEO, auth, then shipping and debugging production — hands-on, with exercises.

01 Next.js 16 from Zero to Senior · Part 1 — Foundations & the App Router

Start Next.js 16 from zero: what the framework really is, install it with Turbopack, understand the App Router file conventions, and grasp the single most important idea — Server Components by default. With exercises.
02 Next.js 16 from Zero to Senior · Part 2 — Routing Deep Dive

Master App Router routing: dynamic and catch-all segments, route groups, parallel and intercepting routes, layouts vs templates, loading/error/not-found, generateStaticParams, and the async params/searchParams of Next.js 16.
03 Next.js 16 from Zero to Senior · Part 3 — Server Components & Data Fetching

Fetch data the App Router way: async Server Components, avoiding request waterfalls with parallel fetching, streaming slow parts with Suspense, the server/client data handoff, and the dynamic-by-default model of Next.js 16.
04 Next.js 16 from Zero to Senior · Part 4 — Cache Components & the New Caching Model

The headline feature of Next.js 16: Cache Components. Enable cacheComponents, use the "use cache" directive, control TTL with cacheLife, invalidate with cacheTag + revalidateTag/updateTag, and ship instant pages with PPR.
05 Next.js 16 from Zero to Senior · Part 5 — Client Components & URL State

Use the browser deliberately: when to add "use client", the server-to-client boundary and bundle cost, composition patterns, hydration, and using the URL as state with useRouter, usePathname, and useSearchParams.
06 Next.js 16 from Zero to Senior · Part 6 — Server Actions & Forms

Mutate data without API routes: Server Actions with "use server", progressive-enhancement forms, useActionState and useFormStatus, optimistic UI with useOptimistic, zod validation, and revalidating after a write.
07 Next.js 16 from Zero to Senior · Part 7 — Route Handlers, APIs & Proxy

Build HTTP endpoints with route.ts, work with the async cookies() and headers(), stream responses, pick Node vs Edge runtime, handle webhooks and CORS, and use proxy.ts — the renamed middleware in Next.js 16.
08 Next.js 16 from Zero to Senior · Part 8 — Rendering, Metadata, SEO & Assets

Control how pages render (static, dynamic, PPR), generate metadata and OG images, ship sitemaps and robots, and use the built-in optimizations: next/image, next/font, and next/script — for fast, discoverable pages.
09 Next.js 16 from Zero to Senior · Part 9 — Auth, Sessions & Security

Authenticate properly in the App Router: sessions vs JWTs, secure httpOnly cookies, a Data Access Layer, protecting pages and Server Actions, proxy.ts for redirects, and the security headers and practices every app needs.
10 Next.js 16 from Zero to Senior · Part 10 — Production, Testing & Debugging

Ship like a senior: performance budgets and bundle analysis, testing with Vitest and Playwright, deploying to Vercel and self-hosting with Docker (standalone output), debugging with the Next Devtools MCP, and a capstone project.