Vercel Logo

Next.js Foundations

Prepare for the self-paced Foundations workshop. Across four sections you'll build two production-ready apps (web + blog) using Next.js and Vercel. This page outlines what you'll build, how we teach, prerequisites, and the section-by-section roadmap.

Joel Hooks

Joel Hooks

The Next.js Foundations workshop is a self-paced, hands-on build. You'll implement real features across two Next.js apps for ACME Corporation and ship production-grade patterns.

Using this prep track will save you hours and help you hit the ground running. You'll understand the roadmap, set up the repo, and know what you're shipping in each section.

What you'll actually build (hands-on)

Two apps in a Turborepo monorepo for ACME Corporation:

  • Marketing site (apps/web) — Home, About, Contact pages with shared header/footer, an image gallery, and performance optimization patterns

  • Blog (apps/blog) — Listing with pagination and filtering, dynamic post routes, and proper 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

This isn't watch-and-copy. You'll build incrementally with production patterns:

  • 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 (26 lessons total):

  1. Foundation & Setup (7 lessons) — Deploy-first workflow, App Router file conventions, Server vs Client Components, dynamic routing, environment security, error boundaries, and proxy basics
  2. Core Features (9 lessons) — Component boundaries, composition patterns, nested layouts, data fetching without waterfalls, navigation, params/searchParams, Server Actions, and multi-app rewrites
  3. Advanced Patterns (6 lessons) — Cache Components with cacheLife/cacheTag, dynamic metadata, Suspense streaming, image optimization, font loading, and Core Web Vitals measurement
  4. Polish & Presentation (4 lessons) — Security hardening, query performance, third-party scripts, and advanced image optimization

Sections

Reference

  • Glossary — Terms, acronyms, and concepts with links to where they're introduced