Updated June 2026

React Apps with Next.js

Class Duration

35 hours of live training delivered over 5 days.

Student Prerequisites

Experience with modern JavaScript or TypeScript
Working knowledge of the new language features like classes, modules, arrow functions, and destructuring

Target Audience

Web developers and teams who want to build production-ready React 19 applications on Next.js 16 using the App Router, React Server Components, and Server Actions - including those maintaining older Pages Router codebases or migrating from earlier App Router versions. This course assumes the client-side React 19 fundamentals covered in Advanced React.

Description

This comprehensive course teaches modern Next.js 16 on top of React 19. The course centers on the App Router, React Server Components, Server Actions, and Cache Components - the architecture that defines Next.js in 2026. Participants learn the new React 19 features (Actions, useOptimistic, useFormStatus, the use hook, useActionState), the React Compiler (memoization without manual useMemo / useCallback), Server Functions, Turbopack (now the default bundler for both dev and production builds), proxy.ts (the replacement for middleware.ts), streaming and Suspense, Next.js's opt-in caching model built on Cache Components ('use cache', revalidatePath, revalidateTag), and end-to-end testing with Playwright. Pages Router patterns are covered briefly so participants can read older codebases. The Next.js caching model has changed significantly across recent versions; this course teaches the current Next.js 16 semantics, not those of earlier App Router versions.

Learning Outcomes

Build a production-ready Next.js 16 application on the App Router with React 19, using React Server Components and Client Components effectively and knowing when to reach for each.
Implement Server Actions and Server Functions for forms and data mutations, and apply React 19 features: Actions, useOptimistic, useFormStatus, useActionState, and the use hook.
Let the React Compiler handle memoization (and know when manual useMemo/useCallback still earn their keep).
Master the Next.js 16 opt-in caching model with Cache Components: 'use cache', revalidatePath, revalidateTag, and fetch-cache options.
Use Partial Prerendering for instant static shells with dynamic per-user content.
Work with Turbopack (now the default bundler for both dev and production builds) and intercept and rewrite requests with proxy.ts, the Next.js 16 replacement for middleware.ts.
Apply modern styling (Tailwind, CSS Modules, CSS-in-JS) with Server Components in mind.
Test components with Vitest + Testing Library, write end-to-end tests with Playwright, and deploy to Vercel, Cloudflare, AWS, or self-hosted Node.

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Code extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

React 19 and Next.js 16 Overview

Why React 19 + Next.js 16 in 2026?
What problem does React solve?
What problem does Next.js solve (and what's changed in v16)?
App Router vs. Pages Router (and reading legacy Pages-Router code)

Development Environment

Node.js 22+
Visual Studio Code with React DevTools
Next.js CLI and create-next-app
Turbopack - the default bundler for dev and production builds

Next.js 16 Project Setup

Create a new project with create-next-app
Folder structure under app/
Browser support
Styles and assets
Dependencies and next.config.ts

React 19 Components

Function components only (no classes)
Composing and reuse
React Compiler: automatic memoization

React 19 Rendering and JSX

What problem does JSX solve?
Embedding expressions, attributes, fragments
Virtual DOM and Fiber
Conditional rendering with &&, ternary, and early return
Rendering lists with key

React 19 Component Props

Immutable props
String literals vs. expressions
TypeScript prop types
Default prop values
Naming patterns

React 19 Events and Actions

DOM events
Event handlers in functional components
Passing handlers via props
React 19 Actions (replacing manual fetch+state for form submissions)

React 19 Hooks

useState, useEffect, useCallback, useMemo (and when the Compiler removes the need)
useOptimistic for optimistic UI
useActionState and useFormStatus for form state
use for unwrapping promises and context
Custom hooks

Forms with Server Actions

Controlled and uncontrolled components
Server Actions: <form action={...}> with server-side functions
'use server' directive
Validation with Zod (client + server)
Progressive enhancement: forms that work without JS

Component Architecture

Server Components vs. Client Components - when to reach for each
The 'use client' boundary
Reusable components and component communication
Container/presentation patterns in a Server-Components world
Avoiding the "everything is 'use client'" anti-pattern

App Router

Define routes under app/
page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx
Linking and navigation with <Link>
Dynamic routes and route groups
Parallel and intercepting routes
proxy.ts for request interception (replacing middleware.ts)
Streaming with Suspense

Data Fetching

Server Components fetching data directly with async/await
The fetch cache and 'use cache' directive
Server Actions / Server Functions for mutations
Connecting forms to Server Actions
Cookies and headers in Server Components / Actions

Rendering Strategies

Static Site Generation (SSG)
Server-Side Rendering (SSR)
Partial Prerendering (PPR) - static shells with dynamic content
Client-Side Rendering for interactive UIs
Streaming responses with Suspense

Caching with Cache Components (Next.js 16)

Cache Components: opt-in caching with the 'use cache' directive
The underlying caches: Request Memoization, Data Cache, Full Route Cache, Router Cache
revalidatePath() and revalidateTag()
cache-control and dynamic route segment config
Migration notes from Next.js 13/14/15 caching defaults

Styling

Tailwind CSS (the most common Next.js 16 default)
CSS Modules
CSS-in-JS in a Server Components world (limitations and choices)
Sass
Responsive design

Testing

Vitest + Testing Library for components
Mocking Server Actions
Testing Server Components (rendering helpers)
Playwright for end-to-end tests
Visual regression with Playwright snapshots

Deployment

Vercel
Cloudflare (via @opennextjs/cloudflare)
AWS / self-hosted Node
Static export