Next.js App Router (Deep Workflow)

App Router changes mental models: where code runs, what is cached, and how HTML streams. Defaults differ from Pages Router—call that out explicitly.

When to Offer This Workflow

Trigger conditions:

• New App Router project or migration from pages/
• Confusion Server vs Client Components; hooks errors
• Stale data, wrong cache, need ISR semantics

Initial offer:

Use six stages: (1) route & layout model, (2) Server vs Client boundaries, (3) data fetching & cache, (4) revalidation & tags, (5) streaming & UX, (6) deployment & runtime. Confirm Next version and hosting (Vercel self, etc.).

Stage 1: Route & Layout Model