React Apps with Next.js

Duration

5 Days

Description

This comprehensive course teaches modern Next.js 15 on top of React 19. The course centers on the App Router, React Server Components, Server Actions, and Partial Prerendering — 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, streaming and Suspense, Next.js's caching model ('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 15 semantics, not Next.js 13/14.

Objectives

Build a production-ready Next.js 15 application on the App Router with React 19.
Use React Server Components and Client Components effectively, knowing when to reach for each.
Implement Server Actions and Server Functions for forms and data mutations.
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 15 caching model: 'use cache', revalidatePath, revalidateTag, fetch-cache options.
Use Partial Prerendering for instant static shells with dynamic per-user content.
Configure Turbopack for dev and production builds.
Apply modern styling (Tailwind, CSS Modules, CSS-in-JS) with Server Components in mind.
Test components with Vitest + Testing Library and write end-to-end tests with Playwright.
Deploy to Vercel, Cloudflare, AWS, or self-hosted Node.

Target Audience

All attendees must have experience with modern JavaScript or TypeScript, including the new language features like classes, modules, arrow functions, and destructuring.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

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 Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

Introduction

React 19 and Next.js 15 Overview

Why React 19 + Next.js 15 in 2026?
What problem does React solve?
What problem does Next.js solve (and what's changed in v15)?
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 for dev and production builds

Next.js 15 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
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 (Next.js 15)

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

Styling

Tailwind CSS (the most common Next.js 15 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