Next.js Full-Stack

The single biggest mental shift in modern Next.js: your components run on the server unless you opt out.

Consolidate Module 1 — the App Router, folders-as-routes, special files, and the Server-Component-by-default model — with a round of mixed challenges.

How nested layouts compose into a shell, and how to share UI across a section of your app.

Build routes like /blog/[slug], read params and searchParams (async in Next.js 15), and validate untrusted URL input.

Client-side navigation with <Link>, programmatic routing with useRouter, and the loading/error/not-found special files.

Drill Module 2 — nested layouts, dynamic and catch-all routes, awaiting params/searchParams, <Link> vs <a>, and the loading/error/not-found files.

What 'use client' really does, why it's a boundary (not a per-component flag), and how to keep client bundles small.

Pass Server Components into Client Components as children, understand prop serialization, and avoid the common composition mistakes.

Inside a Client Component: use state and effects correctly, avoid hydration mismatches, and share state app-wide with a Context provider — without turning your whole app into client code.

Drill the boundary — where 'use client' goes, server→client composition, serializable props, hydration, and Context providers.

Async/await data fetching directly in components, parallel vs sequential requests, and avoiding the fetch waterfall.

Static vs dynamic rendering, the Next.js 15 caching defaults, and controlling freshness with revalidate and cache options.

Stream a page in pieces so fast content shows immediately while slow content loads — using Suspense boundaries.

Drill Module 4 — async server fetching, parallel vs sequential requests, the Next.js 15 caching defaults, revalidation, and Suspense streaming.

Run server code straight from a form with 'use server' — no API endpoint, no fetch, no client JavaScript required.

Never trust the client: parse FormData with Zod, enforce types and limits, strip dangerous content, and authorize the user — all inside the action.

Wire actions to React's useActionState for errors and results, show pending state with its isPending flag, and refresh data with revalidatePath.

Drill Module 5 — 'use server', treating actions as public endpoints, Zod validation, authorization, useActionState, and revalidatePath.

Create real JSON endpoints in route.ts using the Web Request/Response APIs, and know when to use them instead of Server Actions.

Build /api/notes/[id] endpoints, read dynamic params, handle errors with correct status codes, and avoid leaking internal details.

Read headers and cookies in a Route Handler, authenticate API callers, and understand CORS — why a browser blocks cross-origin calls and how to allow the ones you trust.

Drill Module 6 — route.ts endpoints, status codes, body/param validation, error handling, and CORS.

Model data with the Prisma schema, generate a typed client, and set up the singleton pattern that avoids exhausting connections in dev.

Wire Server Components and Server Actions to Prisma for full create/read/update/delete — and see why Prisma queries are injection-safe by default.

Make mutations feel instant with useOptimistic while the server confirms — and roll back automatically if the action fails.

Drill Module 7 — Prisma setup, the singleton, user-scoped queries, injection safety, and optimistic UI.

Run code before a request completes — redirect unauthenticated users, add headers — and understand why middleware is a first gate, not the only check.

Read and set cookies with the async cookies() API, and store sessions securely with httpOnly, secure, and sameSite flags.

Keep secrets server-only, understand the NEXT_PUBLIC_ rule, apply a production security checklist, and deploy your full-stack app.

Assemble everything — routing, Server/Client Components, data fetching, Server Actions, a database, and auth — into one coherent blueprint for a real feature, and make the architectural calls a full-stack dev makes.