Next.js 15 — Full-Stack Meta-Framework Engineering
Build production full-stack applications with Next.js 15 App Router, React Server Components, and Server Actions
Next.js 15 is the definitive full-stack React meta-framework used at Vercel, Netflix, TikTok, and thousands of production applications. This course teaches the complete Next.js 15 App Router model: React Server Components (RSC), Server Actions, streaming with Suspense, Parallel and Intercepting Routes, advanced caching strategies, authentication with Auth.js, database integration with Prisma, and production deployment on Vercel and custom infrastructure.
Course Prerequisites
- React — Fundamentals, Hooks & Modern Patterns: React Fundamentals, Hooks & Modern Patterns
Part of Academy Track:
What You Will Master
Curriculum Modules (5 Modules)
Explore the structured module breakdown, lesson outcomes, and practical lab exercises.
Module 1: App Router Fundamentals
5 Lessons • ~5.3 Study Hours (0.53 CEUs)Module 1: App Router Fundamentals. Understand how Next.js 15 App Router changes full-stack architecture: less client JavaScript, more server logic, and the shift from SPA + REST API to RSC + Server Actions.. Master the App Router file conventions: page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, route.tsx — and how folder structure defines URL structure.
Course Introduction — Next.js 15 and the Full-Stack Paradigm Shift
Understand how Next.js 15 App Router changes full-stack architecture: less client JavaScript, more server logic, and the shift from SPA + REST API to RSC + Server Actions.
File-Based Routing & Folder Conventions
Master the App Router file conventions: page.tsx, layout.tsx, loading.tsx, error.tsx, not-found.tsx, route.tsx — and how folder structure defines URL structure.
Nested Layouts, Route Groups & Templates
Build persistent UI shells with nested layouts, organise routes with (route groups) without affecting URLs, and differentiate between layout.tsx (persistent) and template.tsx (remounts).
Parallel Routes & Intercepting Routes
Render multiple pages simultaneously with @slots (Parallel Routes), intercept navigations with (.) routes for modal patterns, and build photo gallery / modal flows.
Dynamic Routes, Catch-All & Metadata API
Define dynamic segments ([id]), optional catch-all ([...slug]), generate static params with generateStaticParams, and configure SEO metadata with the Metadata API and generateMetadata.
Module 2: React Server Components & Data Fetching
5 Lessons • ~5.7 Study Hours (0.57 CEUs)Module 2: React Server Components & Data Fetching. Understand the RSC boundary: when components run on the server vs client, the 'use client' directive, passing server data as props to client components, and the serialisation constraint.. Fetch data directly in async Server Components, understand how Next.js extends the fetch API with caching options (force-cache, no-store, revalidate), and compare with Tanstack Query.
Server vs Client Components — The Mental Model
Understand the RSC boundary: when components run on the server vs client, the 'use client' directive, passing server data as props to client components, and the serialisation constraint.
Data Fetching in Server Components
Fetch data directly in async Server Components, understand how Next.js extends the fetch API with caching options (force-cache, no-store, revalidate), and compare with Tanstack Query.
Streaming with Suspense & Progressive Rendering
Stream HTML to the browser progressively with React Suspense boundaries and the loading.tsx convention — showing instant shell UI while data-dependent components load.
Next.js Caching — All Four Layers Explained
Master Next.js 15's four caching layers: Request Memoisation, Data Cache, Full Route Cache, and Router Cache. Understand when each applies and how to opt out.
On-Demand Revalidation with revalidatePath & revalidateTag
Purge cached data on-demand when content changes using revalidatePath() and revalidateTag() — enabling ISR-style freshness without waiting for a time interval.
Module 3: Server Actions & Mutations
4 Lessons • ~4.5 Study Hours (0.45 CEUs)Module 3: Server Actions & Mutations. Define server actions with 'use server', call them from form actions and event handlers, understand how they securely run on the server, and handle errors with try/catch.. Wire Server Actions to HTML forms using the action prop, track submission state with useFormStatus (pending button), and display server validation errors with useFormState.
Server Actions — Secure Server-Side Functions
Define server actions with 'use server', call them from form actions and event handlers, understand how they securely run on the server, and handle errors with try/catch.
Form Actions, useFormState & useFormStatus
Wire Server Actions to HTML forms using the action prop, track submission state with useFormStatus (pending button), and display server validation errors with useFormState.
Optimistic UI with useOptimistic
Show instant UI feedback before the Server Action completes using useOptimistic — updating the UI immediately and rolling back if the server returns an error.
Route Handlers — Building REST API Endpoints
Build REST API endpoints with Route Handlers (route.ts), handle different HTTP methods, access request headers and cookies, and stream responses for real-time scenarios.
Module 4: Auth, Database & Full-Stack Patterns
5 Lessons • ~6.4 Study Hours (0.64 CEUs)Module 4: Auth, Database & Full-Stack Patterns. Set up Prisma with PostgreSQL in a Next.js project, define the schema, run migrations, and use the Prisma Client in Server Components and Server Actions without connection leaks.. Implement full authentication with Auth.js v5: OAuth providers (Google, GitHub), credential-based login, JWT sessions, database sessions with Prisma adapter, and session access in RSC.
Prisma ORM with Next.js — Database Integration
Set up Prisma with PostgreSQL in a Next.js project, define the schema, run migrations, and use the Prisma Client in Server Components and Server Actions without connection leaks.
Auth.js v5 — Authentication in Next.js App Router
Implement full authentication with Auth.js v5: OAuth providers (Google, GitHub), credential-based login, JWT sessions, database sessions with Prisma adapter, and session access in RSC.
Middleware & Protected Routes
Use Next.js middleware to protect routes: redirect unauthenticated users, implement RBAC at the edge, add rate limiting headers, and set security response headers.
File Uploads with uploadthing & Cloud Storage
Handle file uploads in a Next.js Server Action context using uploadthing or Cloudinary, store file metadata in the database, and display uploaded files in Server Components.
Capstone: Full-Stack SaaS Starter with Auth & Billing
Build a complete SaaS application skeleton: Auth.js auth, Prisma database, Stripe subscription billing, protected dashboard, tenant-scoped data, and admin panel.
Module 5: Performance, Deployment & Production
4 Lessons • ~4.2 Study Hours (0.42 CEUs)Module 5: Performance, Deployment & Production. Use the next/image component for automatic WebP conversion, responsive sizing, and lazy loading. Optimise web fonts with next/font to eliminate CLS.. Measure LCP, INP, and CLS with the next/web-vitals API, use the Next.js Bundle Analyser, implement prefetching, and apply performance-safe patterns for dynamic content.
Image Optimisation with next/image & Font Strategy
Use the next/image component for automatic WebP conversion, responsive sizing, and lazy loading. Optimise web fonts with next/font to eliminate CLS.
Core Web Vitals & Next.js Performance Patterns
Measure LCP, INP, and CLS with the next/web-vitals API, use the Next.js Bundle Analyser, implement prefetching, and apply performance-safe patterns for dynamic content.
Deploying to Vercel & Custom Servers (Docker)
Deploy a Next.js app to Vercel with preview environments, configure environment variables, run Next.js in a Docker container with next start and standalone output mode, and deploy to a VPS.
Environment Variables, Secrets & Security Hardening
Manage NEXT_PUBLIC_ vs server-only environment variables, use the @t3-oss/env-nextjs schema validation package, add security headers with next.config.js, and audit client bundle exposure.
Frontend Engineering Progression
Continue advancing through the sequential curriculum stages of this academy track: