Skip to main contentData Garden
All posts

Series

Next.js in Practice

A practical, source-backed course on Next.js 16, from the App Router, Server Components and Cache Components to rendering strategies, auth patterns and recipes for everyday problems.

Parts
26
Reading time
6 h 19 min
Updated
Start reading Begins with Next.js in Practice: from request to pixels

Next.js 16 changed a lot of what you thought you knew. Middleware is now proxy.ts, params and cookies() are only async, Turbopack is the default bundler, and caching is opt-in through Cache Components, 'use cache' and tags. This course explains how the framework actually works today, and then how to build real things with it: which rendering strategy to pick, how to wire TanStack Query or an auth layer into the server model, and how to fix the errors you will meet.

It is written for working React developers who use Next.js, or are about to, and want reasons instead of rules of thumb. Every page is pinned to Next.js v16.4.3 (source on GitHub (opens in a new tab)), and every claim about how something works links to the exact lines at that tag, so you can check it and the line numbers stay true.

The course has three tracks:

  • Features (parts 01 to 11): one built-in feature per part, how it works under the hood and how to use it well.
  • Patterns (parts 20 to 28): complete strategies built from the features, from static generation to partial prerendering, client-only SPAs, TanStack Query and two styles of authentication.
  • Recipes (parts 40 to 44): short entries that go from a symptom to its cause in the source to a fix.
Tip: How to read this

If you are deciding how to build something, start with the rendering decision map and follow its links into the patterns. If you are new to the App Router, read parts 01 to 04 in order: each one builds on the last. If something is broken today, go straight to the recipe part for your problem and follow its links back into the features. The index has a one-line summary of every part.

This course pairs with the two React courses in the vault. Next.js is built on React Server Components, Suspense and transitions, and when a part needs those it links to React Internals (React 19 line by line) or How React Works (the same ideas in plain language) instead of re-explaining them.

Parts

  1. Index: from request to pixels
  2. The App Router: files, segments and layouts
  3. Server and Client Components
  4. Linking, navigation and prefetching
  5. Data fetching and streaming
  6. Cache Components: use cache, cacheLife and cacheTag
  7. Revalidation: tags, paths and refresh
  8. Server Actions and forms
  9. Route Handlers and Proxy
  10. Metadata, images, fonts and scripts
  11. Errors, redirects and request lifecycle APIs
  12. Configuration, Turbopack and deployment
  13. Rendering strategies: a decision map
  14. SSG and ISR: static pages and generateStaticParams
  15. SSR: rendering per request
  16. PPR: partial prerendering with Cache Components
  17. CSR: client-rendered islands
  18. Fully client-side: SPA and static export
  19. TanStack Query: server prefetch and hydration
  20. Server-aware auth: sessions, Proxy and the DAL
  21. Client-only auth: tokens in the browser
  22. Recipes: data, caching and revalidation
  23. Recipes: routing and navigation
  24. Recipes: rendering and hydration errors
  25. Recipes: forms, mutations and uploads
  26. Recipes: performance, config and deployment

The learning path

Flowchart

Diagram source:

flowchart LR
    F1["Routing<br/>App Router, Server and<br/>Client Components, navigation"] --> F2["Data<br/>fetching, streaming,<br/>Cache Components"]
    F2 --> F3["Mutations<br/>revalidation,<br/>Server Actions"]
    F3 --> F4["Platform<br/>Route Handlers, Proxy,<br/>errors, config"]
    F2 --> D{"Decision map<br/>part 20"}
    D --> P1["Rendering patterns<br/>SSG, ISR, SSR, PPR,<br/>CSR, SPA"]
    D --> P2["Integration patterns<br/>TanStack Query, auth"]
    P1 -.-> R["Recipes<br/>symptom, cause, fix"]
    P2 -.-> R
    F4 -.-> R

The parts

26 parts
  1. 00Next.js in Practice: from request to pixelsMap of the Next.js in Practice course, with a one-line summary of every part and a diagram of how a request flows through Next.js 16.4.3.3 min read
  2. 01The App Router - Files, Segments and LayoutsHow the App Router turns folders and special files into a loader tree, how that tree becomes nested layouts, boundaries and slots, and what dynamic, grouped, parallel and intercepted segments really do in Next.js 16.4.3.16 min read
  3. 02Server and Client ComponentsWhat 'use client' compiles to, why a Client Component still renders on the server, how the bundler splits one app into server, SSR and browser layers, and which props can cross the boundary in Next.js 16.4.3.11 min read
  4. 03Linking, Navigation and PrefetchingWhat happens between a click on a Next.js Link and the new page on screen, how the segment cache prefetches and reuses route data, and when to use useRouter, useLinkStatus, scroll control or redirect in Next.js 16.4.3.13 min read
  5. 04Data Fetching and StreamingHow Server Components fetch data in Next.js 16, why params, searchParams, cookies() and headers() are promises, how fetch is deduplicated per request, how loading.tsx and Suspense stream the page, and how to avoid waterfalls and hand promises to Client Components with use().12 min read
  6. 05Cache Components - use cache, cacheLife and cacheTagHow the Cache Components model works in Next.js 16, what the compiler turns a 'use cache' function into, how the cache key is built from the function id, arguments, closures and build id, how cacheLife and cacheTag set an entry's lifetime and tags, and how cache handlers, 'use cache: private' and 'use cache: remote' store the result.17 min read
  7. 06Revalidation - Tags, Paths and RefreshHow cached data gets fresh again in Next.js 16, covering time-based revalidation with cacheLife, revalidateTag with a profile, updateTag for read-your-own-writes, revalidatePath and its implicit path tags, refresh, and how an invalidation travels from a Server Action through the cache handlers to the client router.12 min read
  8. 07Server Actions and FormsHow 'use server' functions become Server Actions in Next.js 16, from action IDs and encrypted closures in the compiler, through the client dispatch queue and the POST request, to the origin check, body limit and single-roundtrip re-render in action-handler.ts, plus forms with useActionState, useFormStatus, useOptimistic and next/form.15 min read
  9. 08Route Handlers and ProxyHow route.ts handlers are dispatched and when a GET is prerendered, and how proxy.ts (the renamed middleware) runs before routing, matches paths and talks to the router through response headers.16 min read
  10. 09Metadata, Images, Fonts and ScriptsHow Next.js 16 resolves metadata across segments and streams it, turns metadata files into route handlers, optimizes images on demand, self-hosts fonts at build time, and orders third-party scripts.18 min read
  11. 10Errors, Redirects and Request Lifecycle APIsHow Next.js 16 turns thrown errors into UI and status codes (error.tsx, catchError, notFound, forbidden, unauthorized, redirect) and how the request lifecycle APIs after, connection, cookies, headers, draftMode and instrumentation.ts work under the hood.20 min read
  12. 11Configuration, Turbopack and DeploymentHow Next.js 16 loads next.config.ts, which options left experimental, how .env files and NEXT_PUBLIC_ inlining really work, why Turbopack is now the default bundler, and how to ship the result with output standalone, Docker, shared cache handlers, deploymentId and the Deployment Adapter API.18 min read
  13. 20Rendering Strategies - A Decision MapHow to choose between SSG, ISR, SSR, PPR, CSR and a full SPA in Next.js 16, and how the build decides on its own whether a route is static, partial or dynamic.13 min read
  14. 21SSG and ISR - Static Pages and generateStaticParamsBuild static pages and keep them fresh in Next.js 16, with generateStaticParams, time-based and on-demand ISR, in both the Cache Components and the legacy model.11 min read
  15. 22SSR - Rendering Per RequestWhen and how a Next.js 16 page renders on every request, what the server does for that request, and how per-request rendering differs with and without Cache Components.9 min read
  16. 23PPR - Partial Prerendering with Cache ComponentsHow Partial Prerendering works in Next.js 16 with Cache Components, from detecting dynamic access in the prerender to the postponed state and the resume render, and how to design pages for it.12 min read
  17. 24CSR - Client-Rendered IslandsHow to render parts of an App Router page only in the browser, from fetch-on-mount and client data libraries to next/dynamic with ssr false and React's browser() bailout, and how Next.js 16.4.3 implements each one.13 min read
  18. 25Fully Client-Side - SPA and Static ExportHow output 'export' turns a Next.js 16.4.3 App Router app into static files, what the exporter checks and refuses, how client navigation works without a server, and how to build a true single-page app shell on top of it.13 min read
  19. 26TanStack Query - Server Prefetch and HydrationA complete, copy-pasteable TanStack Query v5 setup for the Next.js 16.4.3 App Router - per-request clients, server prefetch with streamed pending queries, HydrationBoundary, useSuspenseQuery, mutations that invalidate both caches, Cache Components, and the pitfalls.17 min read
  20. 27Server-Aware Auth - Sessions, Proxy and the DALA complete cookie-session auth build for Next.js 16, covering encrypted sessions with jose, login and logout Server Actions, an optimistic check in proxy.ts, a Data Access Layer with verifySession, authorization in actions and Route Handlers, unauthorized() and forbidden(), and the rules for auth under Cache Components.21 min read
  21. 28Client-Only Auth - Tokens in the BrowserAuth handled entirely in the browser against an external API, compatible with output 'export': an AuthProvider, where to keep tokens, refresh-token rotation with a fetch wrapper and TanStack Query, client route guards, OAuth PKCE, cross-tab logout, and how it compares with server-aware auth.15 min read
  22. 40Recipes - Data, Caching and RevalidationFixes for the data and caching problems Next.js 16 developers hit most, from stale data after a mutation to the blocking-route error, each traced to the source line that causes it.15 min read
  23. 41Recipes - Routing and NavigationThirteen fixes for the routing problems Next.js 16 developers hit most, from route modals and missing default.js files to active links, URL state, scroll, i18n, protected sections and basePath.17 min read
  24. 42Recipes - Rendering and Hydration ErrorsFourteen recipes for the rendering errors Next.js 16 developers hit most, from serialization and "use client" mistakes to hydration mismatches, theme flash and prerender bailouts, each traced to the line that throws it.17 min read
  25. 43Recipes - Forms, Mutations and UploadsFixes for the form, Server Action and upload problems Next.js 16 developers hit most, from a submit button that never shows pending to "Failed to find Server Action" after a deploy, each traced to the line that causes it.17 min read
  26. 44Recipes - Performance, Config and DeploymentFixes for the performance, configuration and deployment problems Next.js 16 developers hit most, from oversized client bundles and frozen NEXT_PUBLIC_ values to stale caches across pods and "Failed to find Server Action" after a deploy.18 min read