Build Six Real-World Apps with the App Router, Server Components, and Server Actions

Read before you buy: the PDF here is a free sample — the first 20 pages of the 606-page book (payments, sales and reviews on this demo site are sample data). Get the full e-book at thenexbooks on Gumroad.

The best way to learn Next.js is to build real things with it — and then build harder things.

Tutorials that stop at a to-do list skip everything that makes real projects difficult: content that must rank in search, data that must stay consistent, users who must only see their own records, payments that must never be charged twice, pages that must stay fast as the catalog grows, and apps that must keep running after you ship them.

This book teaches Next.js through six complete projects for Driftwood Labs, a fictional product studio. Each project is harder than the last, and every concept is introduced at the moment a project needs it. You already know React basics; this book turns them into full-stack, production-ready Next.js skills.

• 606 pages · 28 chapters + 4 appendices · practice exercises in every chapter
• Project 1 — Studio Site: layouts, metadata, an MDX blog, RSS, Open Graph images, SEO, first deployment
• Project 2 — Driftwood Docs: Server Components, caching and revalidation, search params, streaming, Suspense, error UI, Route Handlers
• Project 3 — Driftwood Jobs: PostgreSQL + Prisma, Server Actions + Zod, Auth.js, roles, uploads, email, full-text search, testing with Vitest and Playwright
• Project 4 — Ledgerly SaaS: organizations and data isolation, parallel routes, Stripe subscriptions and webhooks, rate limiting, audit logs, background jobs
• Project 5 — Driftwood Supply: catalog caching strategy, cart and Stripe Checkout, Core Web Vitals and performance
• Project 6 — Driftwood Live: real-time chat and presence, plus an AI assistant with streaming, tools, and guardrails
• Deployment to Vercel and Docker, observability, error tracking, and upgrading Next.js over time
• Written for recent Next.js (15 and later), React 19, TypeScript, and Tailwind CSS v4 — with clear notes where versions differ

Table Of Contents

Part I — Foundations Through Your First Project

• Ch 1 · How This Book Works: Next.js, the App Router, and Learning by Building
• Ch 2 · Project 1 Kickoff: create-next-app, TypeScript, Tailwind CSS, and Project Structure
• Ch 3 · Project 1: Layouts, Pages, Navigation, and Metadata for a Studio Website
• Ch 4 · Project 1: An MDX Blog with Static Generation, Dynamic Routes, and RSS
• Ch 5 · Project 1: Images, Fonts, SEO, Open Graph, and Your First Deployment

Part II — Content and Data

• Ch 6 · Server Components in Practice: Fetching, Caching, and Revalidation
• Ch 7 · Project 2: A Searchable Knowledge Base with Search Params, Streaming, and Suspense
• Ch 8 · Project 2: Loading, Error, and Not-Found UI, and a Search Route Handler
• Ch 9 · Project 3: Modeling the Job Board with PostgreSQL and Prisma
• Ch 10 · Project 3: Server Actions for Posting Jobs: Forms, Zod Validation, and Revalidation

Part III — Users, Auth, and Quality

• Ch 11 · Project 3: Authentication with Auth.js: Sessions, OAuth, and Protected Routes
• Ch 12 · Project 3: Authorization, Roles, and the Employer Dashboard
• Ch 13 · Project 3: File Uploads, Email Notifications, and Work After the Response
• Ch 14 · Project 3: Pagination, Filtering, Full-Text Search, and URL State
• Ch 15 · Project 3: Testing the Job Board with Vitest, React Testing Library, and Playwright

Part IV — Building a SaaS

• Ch 16 · Project 4: Planning Ledgerly: Organizations, Members, and Data Isolation
• Ch 17 · Project 4: The Dashboard: Parallel Routes, Charts, and Optimistic UI
• Ch 18 · Project 4: Subscriptions and Billing with Stripe and Webhooks
• Ch 19 · Project 4: Middleware (Proxy), Rate Limiting, Audit Logs, and Security Hardening
• Ch 20 · Project 4: Background Jobs, Scheduled Tasks, and Transactional Email

Part V — Commerce, Real-Time, and AI

• Ch 21 · Project 5: The Driftwood Supply Catalog: Rendering and Caching Strategy
• Ch 22 · Project 5: Cart, Checkout, and Orders with Server Actions and Stripe Checkout
• Ch 23 · Project 5: Performance: Core Web Vitals, Images, Bundles, and Prerendering
• Ch 24 · Project 6: Driftwood Live: Real-Time Chat and Presence
• Ch 25 · Project 6: An AI Assistant: Streaming Responses, Tools, and Guardrails

Part VI — Shipping and Maintaining

• Ch 26 · Deploying Next.js: Vercel, Docker Standalone Builds, and Environments
• Ch 27 · Observability, Error Tracking, and Keeping Next.js Apps Up to Date
• Ch 28 · Capstone: Reviewing the Driftwood Portfolio — Architecture Decisions, Checklists, and Next Steps

Appendices

• App A · Next.js App Router Cheat Sheet
• App B · Project Starter Templates and Snippets
• App C · Production Launch Checklist
• App D · Glossary

WHO IT IS FOR
React developers moving to full-stack Next.js, frontend developers who want to own data, auth, and payments, backend developers who want a productive way to build web interfaces, and freelancers and indie builders who ship complete products. You should know JavaScript or TypeScript and React basics.

FORMAT
PDF (A4), 606 pages, English, clickable table of contents and PDF bookmarks. 1st Edition, 2026. Published by thenexbooks.

This book is independent and is not affiliated with, sponsored by, or endorsed by Vercel, Inc. or Meta Platforms, Inc. Next.js is a trademark of Vercel, Inc.; React is a trademark of Meta Platforms, Inc.

Book details