Training Agenda

Next.js

Next.js is the React framework for production — adding server-side rendering, static generation, file-based routing, API routes, and image optimization to React. With the App Router and React Server Components, it has become the default choice for React applications that need SEO, fast initial loads, or a full-stack architecture in a single project. This training covers the App Router model, server and client components, data fetching patterns, and deployment.

1–2 days On-site, remote, or hybrid Up to 20 participants German or English
What We Cover
Full-stack React with server rendering and the App Router
Day 1

App Router, RSC & Data Fetching

  • Next.js architecture: App Router vs Pages Router — why App Router is the future
  • React Server Components (RSC): server vs client rendering, the boundary
  • File-based routing: layout.tsx, page.tsx, loading.tsx, error.tsx, not-found.tsx
  • Route groups, parallel routes, intercepting routes
  • Data fetching in RSC: async server components, fetch with caching
  • Server Actions: form submissions and mutations without an API
  • Client Components: 'use client', state, effects, event handlers
  • Suspense and streaming: progressive rendering with loading states
  • Metadata API: SEO-friendly page titles, descriptions, Open Graph
  • Image and font optimization: next/image, next/font
Day 2

API Routes, Auth & Deployment

  • Route Handlers: API routes in the App Router — GET, POST, middleware
  • Authentication: NextAuth.js v5 (Auth.js) — providers, session, JWT vs database sessions
  • Middleware: authentication checks, redirects, A/B testing
  • Caching deep-dive: full route cache, data cache, revalidation strategies
  • Incremental Static Regeneration (ISR): revalidating static pages on demand
  • Environment variables: .env files, server-only secrets, NEXT_PUBLIC_ prefix
  • Testing: Vitest for unit tests, Playwright for E2E, mocking fetch
  • Deployment: Vercel (zero-config), Docker container deployment, self-hosted Node.js
  • Performance: Core Web Vitals, bundle analysis with @next/bundle-analyzer
Learning Outcomes
What your team walks away with

React developers who can build full-stack Next.js applications with proper server/client boundaries, data fetching, authentication, and production-ready deployment.

Book the Next.js training

Assumes React fundamentals. Can be combined with the ReactJS training as a 3-day full-stack React track.

Get in touch