Next.js Full Stack · Week 1

React mental models: UI = f(state), hooks rules

01 / 13Present00:00

Next.js Full Stack • Week 1

01 / 13

React mental models: UI = f(state), hooks rules

Server Components render once on the server; Client Components hydrate and own interactivity.

StackShade deck

Predict → explain → retrieve

COURSE CONTENTS

React mental models: UI = f(state), hooks rules

01Modern React FoundationsWeek 1 · 5 topics0/5

React mental models: UI = f(state), hooks rules14 min Server vs Client Components — the real boundary16 min Interactive: classify 10 components as server or client12 min Composition patterns: passing server into client12 min Refactor a client-heavy page into RSC40 min

02App Router & File-Based RoutingWeek 1–2 · 5 topics0/5

Routing: segments, dynamic params, catch-alls, route groups14 min Special files: layout, loading, error, not-found, template14 min Parallel & intercepted routes (modals done right)12 min Route handlers: when pages aren't the answer12 min Build a multi-layout docs + dashboard skeleton45 min

03Rendering StrategiesWeek 2–3 · 5 topics0/5

SSG, SSR, ISR, and PPR — what runs where and when16 min Streaming with Suspense: ship the shell first14 min Interactive: waterfall vs streamed page load12 min Pick the strategy for 8 route scenarios20 min Convert a slow SSR page to static + streamed islands45 min

04Data Fetching & the Caching LayersWeek 3–4 · 5 topics0/5

fetch caching, revalidate, tags16 min The four caching layers mapped and debugged16 min Parallel fetching, deduping, avoiding waterfalls12 min Interactive: predict the cache behavior for 6 configs12 min Build a cached product catalog with tag revalidation50 min

05Mutations with Server ActionsWeek 4–5 · 5 topics0/5

'use server': actions, forms, and progressive enhancement16 min useActionState, useFormStatus, pending + error UX14 min Optimistic updates with useOptimistic12 min Validation, auth checks, and revalidating after mutations14 min Build a full CRUD board with optimistic UI60 min

06Auth, Middleware & DatabasesWeek 5–6 · 5 topics0/5

Auth patterns: sessions, JWT, OAuth/OIDC16 min Middleware: matcher, redirects, header rewrites12 min Postgres + Drizzle/Prisma: schema, queries, pooling16 min Protecting routes, actions and data queries in depth14 min Wire full email + Google auth with protected dashboard60 min

07Production & CapstoneWeek 7 · 5 topics0/5

Deployment targets: Node, serverless, edge — trade-offs14 min Observability: logs, traces, RUM, error tracking12 min Performance: bundle diet, fonts, images, core web vitals14 min Security checklist: headers, CSRF, rate limits, secrets12 min CAPSTONE: full-stack app with auth, CRUD, caching & deploy3–4 days