Phase 8Days 93-107

Next.js App Router Mastery

The way Next.js wants to be used in 2026

Phase Goal

Build a production Next.js app using the App Router fully: server components, server actions, streaming, caching, route handlers, a deliberate rendering strategy, and an E2E test suite — without fighting the framework.

Progress
Notes

Open the written lectures for this course before checking off the phase topics.

Projects
Regional Grant Review Shell (rehearsal)
Conservation Permit Review Workspace — DEPLOYED & TESTED

Day 93: App Router Mental Model

Day 94: Server vs Client Components

Day 95: Data Fetching on the Server

Day 96: Caching & Revalidation

Day 97: Rendering Strategies — The Decision Framework

Day 98: Server Actions

Day 99: Route Handlers + Middleware

Day 100: Auth in Next.js

Day 101: Forms, Actions, Optimistic

Day 102: Images, Fonts, SEO

Day 103: Next.js Architecture & Data-boundary Review

Project
Regional Grant Review Shell (rehearsal)

A rehearsal shell with regional workspaces, reviewers, applications, evidence attachments, and shareable decisions. Days 104–107 transfer the framework mechanics into the distinct conservation-permit capstone.

Day 104: Server Actions & Mutation Reliability Lab

Day 105: Multi-tenant Authorization Lab

Day 106: Rendering, Cache & E2E Review

Day 107: Project — Conservation Permit Review Workspace

Capstone
Conservation Permit Review Workspace — DEPLOYED & TESTED

Build a multi-tenant permit workspace in Next.js: regional teams receive habitat-impact applications, annotate evidence attachments, assign review states, request revisions, and publish read-only decision packets. Use App Router, server components/actions, tenant boundaries, deliberate cache rules, Playwright, and observability.

  • Workspace-scoped sources, annotations, review states, and read-only share links.
  • Server Components for reads, Server Actions for mutations, and explicit cache invalidation.
  • Tenant-isolation tests, a Playwright critical path, error monitoring, and live deployment.

Phase Complete!

After this phase, you'll be able to:

  • App Router fluently: RSC, layouts, streaming, caching, revalidation
  • Choose rendering strategy deliberately (CSR/SSR/SSG/ISR/streaming/PPR)
  • Server actions for mutations
  • Route handlers + middleware + runtime choice
  • NextAuth in production with multi-tenant isolation
  • next/image, fonts, SEO, sitemap, analytics
  • Test a Next.js app with Vitest + Playwright

Next.js is a tool you reach for, not fight. Now scale up assets and real-time.