Next.js 15 & Modern App Router Architecture

App Router, Streaming SSR, Server Actions, Caching & Edge Middleware

7 modules, 35 lessons: Next.js 15 Foundations & App Router; Layouts, Templates & Routing Patterns; Streaming SSR & Boundary Architecture; Data Fetching & Server Actions; Four-Tier Caching Architecture; Route Handlers & Edge Middleware; Production Hardening & Optimization.

Intermediate · 2 hours · 35 lessons · 35 labs

Who it is for

Intermediate level.

For React developers who want to build server-rendered apps with the Next.js App Router: layouts, streaming, server actions, caching and deployment.

What you don't need yet:

• No Next.js experience: you start with the App Router
• No hosting or cloud account: every lab runs in an online sandbox
• No database needed: labs use small sets of sample data

What helps:

• React components, hooks and Suspense
• Node.js basics

Before you start:

• React components, hooks and Suspense (the React course covers all of it)
• Node.js basics (the Node.js course covers all of it)

Take first:

• React 19 & Modern Component Architecture — Intermediate

Take next:

• Production Full-Stack Engineering — Advanced

Learning paths:

• Modern Web Platform & Full-Stack TypeScript

Nobody needs to know everything before they start. Each course builds on the one before, so a learning path takes you there step by step.

Labs

35 labs, 35 of them graded: you write the code, it runs, and graded labs check the result. The outline lists each lesson's labs.

What is free

Start free: First module free with an account. Pro: Every course, lab, handbook, practice exam and certificate.

• Pro monthly — $29 a month. Every course, lab, handbook, practice exam and certificate
• Pro yearly — $249 a year. Every course, lab, handbook, practice exam and certificate

Course outline

Next.js 15 Foundations & App Router

1. App Router Architecture: Server-First Paradigms (1 lab): You can explain the architecture of the Next.js fifteen App Router and how React Server Components execute on the server.
2. Server Components: Async Execution & Constraints (1 lab): You can author asynchronous React Server Components and navigate the architectural constraints of server-side execution.
3. Client Components: use client & Hydration Models (1 lab): You can apply the use client directive effectively to establish interactive boundaries and manage component hydration.
4. Component Tree Composition: Interleaving RSC & Client (1 lab): You can compose complex component trees by interleaving Server and Client Components using React children props.
5. Serialization Boundaries: Props & Server Guardrails (1 lab): You can enforce serialization boundaries across server-client transitions and prevent secret leakage using server-only guardrails.

Layouts, Templates & Routing Patterns

1. Root & Nested Layouts: State Preservation Semantics (1 lab): You can architect root and nested layouts that preserve client state and avoid unnecessary re-renders across route navigations.
2. Templates vs Layouts: Remounting & Page Transitions (1 lab): You can contrast templates with layouts and implement templates when remounting state or entering animations are required.
3. Dynamic Routes: Slugs & generateStaticParams (1 lab): You can implement dynamic route segments, catch-all paths, and generateStaticParams to pre-render static HTML at build time.
4. Route Groups & Private Folders: Modular Structures (1 lab): You can organize complex applications using route groups to create multiple root layouts and private folders to colocate private logic.
5. Parallel & Intercepting Routes: Modals & Split Views (1 lab): You can construct parallel routes with named slots and intercepting routes to create shareable URL modals and split dashboards.

Streaming SSR & Boundary Architecture

1. Streaming SSR: Progressive HTML & Chunked Transfers (1 lab): You can explain how streaming server-side rendering delivers initial HTML immediately while asynchronously piping data chunks over HTTP.
2. Loading UI: Instant Loading States with loading.tsx (1 lab): You can construct instant skeleton loading interfaces using the loading.tsx file convention to deliver seamless visual feedback during route navigation.
3. Granular Suspense: Resolving Waterfall Bottlenecks (1 lab): You can break monolithic route rendering into granular React Suspense boundaries to eliminate sequential waterfalls.
4. Error Boundaries: Nested error.tsx & Reset Logic (1 lab): You can design resilient error boundaries using nested error.tsx files to isolate runtime crashes and provide recovery reset handlers.
5. Not Found Handling: not-found.tsx & Programmatic Exits (1 lab): You can handle missing resources gracefully using not-found.tsx files and programmatic notFound() function invocations.

Data Fetching & Server Actions

1. Async Data Fetching: Parallel Requests & Preloading (1 lab): You can orchestrate parallel data fetching patterns using Promise.all and preloading functions in React Server Components.
2. Server Actions: use server Directives & Mutations (1 lab): You can implement asynchronous Server Actions using the use server directive to execute secure server-side mutations from HTML forms and event handlers.
3. Action State: useActionState & Optimistic Form UI (1 lab): You can manage form mutation lifecycles and pending feedback using the React 19 useActionState hook with Server Actions.
4. Optimistic UI: useOptimistic Rollbacks & Transitions (1 lab): You can implement optimistic UI updates using React 19 useOptimistic and startTransition to deliver zero-latency feedback with automatic rollback on error.
5. Server Action Security: Zod Validation & Auth Gates (1 lab): You can secure Server Actions against unauthorized access and malicious payloads using session authentication gates and Zod schema validation.

Four-Tier Caching Architecture

1. Request Memoization: Automatic Deduplication Tiers (1 lab): You can leverage Request Memoization and React cache to deduplicate identical network and database calls within a single render pass.
2. Data Cache: Cross-Request Persistence & Fetch Tags (1 lab): You can configure the Next.js Data Cache using fetch options, tags, and revalidation intervals to persist data across user requests.
3. Full Route Cache: Static Rendering & Segment Config (1 lab): You can manage the Full Route Cache using route segment configurations to toggle between static pre-rendering and on-demand dynamic execution.
4. Router Cache: In-Memory Client Prefetch Semantics (1 lab): You can explain how the client-side in-memory Router Cache stores React Server Component payloads and controls prefetch behavior.
5. Revalidation Strategies: revalidatePath & Cache Life (1 lab): You can orchestrate on-demand and time-based revalidation strategies using revalidatePath, revalidateTag, and the Next.js 15 cacheLife API.

Route Handlers & Edge Middleware

1. Route Handlers: RESTful Endpoints with NextRequest (1 lab): You can build RESTful backend endpoints using NextRequest and NextResponse inside route.ts files.
2. Streaming Endpoints: Server-Sent Events & NDJSON Feeds (1 lab): You can build streaming Route Handlers using ReadableStream to emit real-time Server-Sent Events and NDJSON data feeds.
3. Edge Middleware: Auth Verification & Route Matchers (1 lab): You can author edge middleware to inspect requests, verify authentication tokens, rewrite headers, and manage redirects.
4. Session Management: Secure Cookies & Token Validation (1 lab): You can manage authenticated sessions safely using asynchronous cookie APIs, cryptographic signatures, and strict browser protection flags.
5. Runtime Environments: Node.js vs Edge Runtime Choice (1 lab): You can select between Node.js and Edge runtimes, balancing native ecosystem compatibility, cold starts, and global latency requirements.

Production Hardening & Optimization

1. Metadata API: Dynamic OpenGraph & Head Management (1 lab): You can construct type-safe SEO headers and generate dynamic OpenGraph social cards using Next.js Metadata and ImageResponse APIs.
2. Image & Font Optimization: Zero Layout Shift Assets (1 lab): You can eliminate Cumulative Layout Shift and optimize bandwidth by using next/image automatic formats and next/font self-hosted font loading.
3. Script Optimization: next/script & Lazy Third Parties (1 lab): You can optimize third-party analytics and scripts without degrading hydration performance using next/script loading strategies and @next/third-parties.
4. Instrumentation: OpenTelemetry & Performance Spans (1 lab): You can implement distributed tracing and custom performance telemetry across server rendering and database calls using Next.js instrumentation.ts.
5. Containerized Deployment: Multi-Stage Docker Builds (1 lab): You can package high-performance Next.js production containers using standalone output mode, multi-stage Alpine builds, and unprivileged system users.