The Next.js Foundations workshop is a self-paced build across two apps for ACME Corporation. You'll work with routing, data fetching, caching, forms, error handling, and deployment.

This course targets Next.js 16.3. In Project Setup, you'll upgrade both starter apps to 16.3 before working through the lessons. The curriculum includes Instant Navigations with Partial Prefetching, Cache Components, root params, custom error boundaries, and the latest Turbopack workflow.

Start by reviewing the roadmap and setting up the repository. Each section builds on that setup and ends with working features you can deploy.

What you'll build (hands-on)

Two apps in a Turborepo monorepo for ACME Corporation:

Marketing site (apps/web): Home, About, and Contact pages with shared UI, an image gallery, and performance work
Blog (apps/blog): A filtered post list, dynamic routes, and error/not-found handling

Both apps share UI components and API helpers from internal packages. You'll wire up analytics, optimize for Core Web Vitals, and deploy with push-to-preview on Vercel.

How this course teaches

You'll build each feature in small, runnable steps:

Start simple, then refine with performance and UX improvements
Use shared packages and Turborepo for a real monorepo workflow
Debug and handle real error scenarios (404, 500, validation)
Ship working features daily
Deploy from lesson 1; push-to-deploy previews on Vercel guide your iterations

Prerequisites

JavaScript/TypeScript familiarity
React: components, hooks, state
Git installed and configured
Node.js 20.9.0+ and pnpm
Vercel account

Code is TypeScript. All tasks are runnable with pnpm.

What you'll build & learn

This course is split into four sections (27 lessons total):

Foundation & Setup (7 lessons): Deploy-first workflow, App Router conventions, Server and Client Components, dynamic routing, environment security, error boundaries, and proxy basics
Core Features (9 lessons): Component boundaries, composition patterns, nested layouts, parallel data fetching, navigation, params/searchParams, Server Actions, and multi-app rewrites
Advanced Patterns (6 lessons): Cache Components, Instant Navigations, dynamic metadata, Suspense streaming, image and font optimization, and Core Web Vitals measurement
Polish & Presentation (5 lessons): Security hardening, query performance, third-party scripts, advanced image optimization, and the course glossary

Sections

Foundation & Setup starts with Project Setup
Core Features starts with Client-Server Boundaries
Advanced Patterns starts with Cache Components
Polish & Presentation starts with Security Review

Reference

Glossary: Terms and concepts linked to their first lesson