Deep Instruction · Phase 03
Next.js — App Router, Server/Client Boundaries, and Production Rendering
Build the actual TaskFlow web shell and reason precisely about what runs on the server, what ships to the browser, and how routing affects data flow.
01code-first02code-first03code-first04code-first05code-first06code-first07code-first08code-first
Scaffold Next.js Inside the pnpm Workspace
Create apps/web deliberately and verify workspace integration before adding features.
App Router: Pages, Layouts, and Segments
Understand filesystem routing as application structure rather than magic filenames.
Server Components as the Default
Fetch and compose on the server when browser interactivity is not required.
Client Components and the use client Boundary
Push interactivity to the smallest useful client island.
Loading, Error, and Not Found UI
Model non-happy states as first-class routes.
Environment Variables and Public/Private Configuration
Know which values exist only on the server and which are embedded into browser bundles.
Data Fetching, Caching, and Revalidation
Treat freshness as a product decision, not just a framework option.
Capstone: TaskFlow Web Shell
Combine routes, layouts, server-first data, client islands, and route states.