Leanpub Header

Skip to main content
Go to Leanpub.com

Next.js – The Comprehensive Guide

From React Fundamentals to AI-Powered Full-Stack Apps

This book is 48% completeLast updated on 2026-08-02
Florian Wessels

Learn Next.js by building a real AI-powered application, from project setup to production deployment. This book covers the complete journey: TypeScript, React, Next.js App Router, Prisma, authentication, the Vercel AI SDK (chat, RAG, tool calling), testing, security, and deployment. One project, 28 chapters, no toy demos.

Minimum price

$16.99

$24.99

You pay

Author earns

$

Also available for 1 book credit with a Reader Membership

PDF
EPUB
WEB
APP
430
Pages
115,036Words
About

About

About the Book

Build a production-ready, AI-powered Next.js application from scratch. One cohesive project, 29 chapters, zero toy demos.

Next.js: The Comprehensive Guide teaches you full-stack web development with Next.js by building HelpDesk AI, an AI-powered support portal where customers submit tickets, agents handle them with the help of an AI copilot, and the system learns from resolved cases. Every concept, from routing and rendering to authentication, file uploads, email notifications, and deployment, is applied to this single project. By the end, you'll have a deployable application, not a collection of disconnected examples.

What makes this book different?

AI integration is a first-class citizen: Five dedicated chapters cover the Vercel AI SDK in depth: text generation with streaming, chat interfaces, structured output with Zod, tool calling, and Retrieval-Augmented Generation (RAG) with pgvector. To the best of our knowledge, no other Next.js book covers this ground.

One project from start to finish: HelpDesk AI grows with each chapter. You'll implement real features like role-based access control, rich text editors, presigned S3 uploads, Server-Sent Events, Sentry monitoring, and Mixpanel analytics. All in the context of a single application that actually makes sense together.

From tutorial to production: This book doesn't stop when the feature works in localhost. Part V covers testing (Vitest, Playwright), security (OWASP, prompt injection), performance optimization, monitoring, and deployment to Vercel and self-hosted environments with Docker.

AI-assisted development: A dedicated chapter on Claude Code, covering CLAUDE.md conventions, custom slash commands, and MCP server integration, reflects how modern software is actually built.

Who is this book for?

  • Experienced TypeScript/JavaScript developers who want to use Next.js productively
  • Developers switching from Java, C#, Python, or Go into the React/Next.js ecosystem (Part I provides a fast-track into TypeScript and React)
  • CTOs and tech leads evaluating AI integration for their products

What's in the book?

The book is organized in six parts:

  • Part I: Fundamentals: TypeScript, Modern JavaScript, React basics and advanced patterns
  • Part II: Next.js Core Concepts: Project setup, routing, rendering strategies, data fetching, styling and UI components
  • Part III: Full-Stack Architecture: Project architecture, Prisma and databases, authentication (Auth.js), forms with S3 uploads, email with AWS SES, state management with Zustand, real-time with SSE
  • Part IV: AI Features: Vercel AI SDK, text generation and streaming, chat interfaces, structured output, tool calling, RAG with pgvector
  • Part V: Production: Testing, performance, security, monitoring (Sentry + Mixpanel), Vercel deployment, self-hosting with Docker
  • Part VI: Advanced Topics: SEO and accessibility, internationalization, the Next.js ecosystem, AI-assisted development with Claude Code

Plus seven reference appendices: a TypeScript cheat sheet, a React hooks reference, the Next.js CLI and configuration, the Vercel AI SDK API, VS Code and alternative IDE setups, and a glossary.

Current status: this is a work in progress

This book is being written and published iteratively. Here's what's available today and what's coming next:

✅ Available now:

  • Part I (Chapters 1 to 4): TypeScript, modern JavaScript, React
  • Part II (Chapters 5 to 9): Project setup, routing, rendering, data fetching, styling
  • Part III (Chapters 10 to 14): Data model, Prisma and PostgreSQL, authentication and scopes, forms with S3 uploads, transactional email, Zustand and SWR, dashboards, webhooks, Server-Sent Events

🔜 Coming next:

  • Part IV (Chapters 15 to 19): AI features with the Vercel AI SDK
  • Part V (Chapters 20 to 25): Testing, performance, security, monitoring, deployment, self-hosting
  • Part VI (Chapters 26 to 29): SEO and accessibility, i18n, the ecosystem, AI-assisted development

When you buy this book, you get every future update for free: new chapters, revisions, corrections, everything. The price increases as the book grows, so early readers get the best deal.

Share this book

Categories

Node.jsTypeScriptReactArtificial IntelligenceWeb DevelopmentMachine LearningSoftware Architecture

Feedback

Email the Author

Author

About the Author

Florian Wessels

Florian Wessels is a CTO and product executive with over 10 years of experience in software development, engineering leadership, and AI integration. He started his career as a chemical engineer before switching into software development, working his way from web developer to team lead to CTO.

In his role as CTO of an AI-powered SaaS company, he built a product from the ground up using React, Node.js, Next.js, and the Vercel ecosystem: the same stack this book teaches. Today he designs and implements AI solutions for enterprise clients in Switzerland.

Florian has published articles on artificial intelligence and prompt engineering in major tech and business magazines. He also works as a freelance consultant, coach, and software engineer for digital product strategy.

This book combines everything he has learned building production Next.js applications with AI features into a single, hands-on guide.

Contents

Table of Contents

Introduction

  1. About the Author
  2. Why This Book?
  3. Who This Book Is For, and Who It’s Not For
  4. The Practice Project: HelpDesk AI
  5. How to Read This Book
  6. Prerequisites
  7. Companion Code and Resources
  8. Conventions in This Book
  9. Part I: Fundamentals

1. TypeScript: Quick Start for Experienced Developers

  1. 1.1. Why TypeScript?
  2. 1.2. Setting Up the Development Environment
  3. 1.3. The Type System: From Primitives to Generics
  4. 1.4. Interfaces vs. Types: When to Use Which
  5. 1.5. Utility Types: Reusing What Already Exists
  6. 1.6. Modules, Imports, and tsconfig.json
  7. 1.7. Common Stumbling Blocks When Switching
  8. Summary

2. Modern JavaScript for TypeScript Developers

  1. 2.1. Destructuring: Unpacking Data
  2. 2.2. Spread and Rest: Copying and Collecting
  3. 2.3. Template Literals
  4. 2.4. Arrow Functions and Lexical this
  5. 2.5. Promises, async/await, and Error Handling
  6. 2.6. Array Methods: Thinking in Transformations
  7. 2.7. Optional Chaining and Nullish Coalescing
  8. 2.8. Quick Reference: Additional Patterns
  9. Summary

3. React: Fundamentals and Mental Model

  1. 3.1. The Mental Model: UI as a Function of State
  2. 3.2. Setting Up a React Playground
  3. 3.3. JSX: Writing UI in TypeScript
  4. 3.4. Components, Props, and Composition
  5. 3.5. State with useState: Making Components Interactive
  6. 3.6. Side Effects with useEffect
  7. 3.7. Event Handling and Controlled Forms
  8. 3.8. Lists and Keys
  9. 3.9. Putting It All Together: A Mini Ticket Board
  10. Summary

4. Advanced React

  1. 4.1. Custom Hooks: Extracting Reusable Logic
  2. 4.2. Context API: Sharing State Across the Tree
  3. 4.3. useReducer: Complex State Logic
  4. 4.4. Refs, Memoization, and Performance
  5. 4.5. Error Boundaries and Suspense
  6. 4.6. Actions, Optimistic Updates, and the use Hook
  7. Summary
  8. Part II: Next.js Core Concepts

5. Next.js: Getting Started and Project Structure

  1. 5.1. What Is Next.js, and Why Do We Need It?
  2. 5.2. App Router vs. Pages Router
  3. 5.3. Creating a Project with create-next-app
  4. 5.4. VS Code Setup
  5. 5.5. Directory Structure: Where Everything Lives
  6. 5.6. Configuration: next.config.ts in Detail
  7. 5.7. Code Quality Tooling: ESLint, Prettier, knip, and Husky
  8. 5.8. Dev Server, Build Process, and Turbopack
  9. Summary

6. Routing and Navigation

  1. 6.1. File-Based Routing in the App Router
  2. 6.2. Layouts, Templates, and Nested Routes
  3. 6.3. Dynamic Routes
  4. 6.4. Route Groups and Parallel Routes
  5. 6.5. Loading, Error, and Not-Found Boundaries
  6. 6.6. Navigation: , useRouter, useLinkStatus, and redirect
  7. 6.7. Search Params and URL State Management
  8. 6.8. Intercepting Routes and Modals
  9. Summary

7. Understanding Rendering Strategies

  1. 7.1. The Rendering Problem
  2. 7.2. Server Components vs. Client Components
  3. 7.3. Cached Rendering and the "use cache" Directive
  4. 7.4. Dynamic Rendering
  5. 7.5. Streaming and Suspense
  6. 7.6. Cache Revalidation: Keeping Cached Pages Fresh
  7. 7.7. Partial Prerendering (PPR)
  8. 7.8. Understanding Hydration
  9. 7.9. Practical Patterns and Anti-Patterns
  10. Summary

8. Data Fetching

  1. 8.1. The Data Problem
  2. 8.2. Fetching Data in Server Components
  3. 8.3. The cache() Function and Request Memoization
  4. 8.4. Server Actions: Mutations Without API Endpoints
  5. 8.5. Calling Server Actions from Client Components
  6. 8.6. Optimistic Updates
  7. 8.7. Bulk Actions: Mutating Multiple Records
  8. 8.8. Parallel vs. Sequential Fetching
  9. 8.9. Caching Strategy: Putting the Layers Together
  10. Summary

9. Styling and UI Components

  1. 9.1. The Styling Problem
  2. 9.2. Tailwind CSS: Setup and Configuration
  3. 9.3. Building a Shared Component Library
  4. 9.4. CSS Modules as an Alternative
  5. 9.5. Font Optimization with next/font
  6. 9.6. Image Optimization with next/image
  7. 9.7. Dark Mode, Theming, and Responsive Layouts
  8. 9.8. Styling the HelpDesk AI Application
  9. Summary
  10. Part III, Deepening the Practice Project: Full-Stack Architecture

10. Project Architecture and Data Model

  1. 10.1. Why Architecture Matters
  2. 10.2. Feature Slices: Organizing Code by Domain
  3. 10.3. Designing the Data Model as a Prisma Schema
  4. 10.4. Shared Types and the Scope System
  5. Summary

11. Database and ORM

  1. 11.1. From Schema to Running Database
  2. 11.2. Setting Up Prisma with PostgreSQL
  3. 11.3. Migrations: Evolving the Schema
  4. 11.4. Type-Safe Queries with Prisma Client
  5. 11.5. Seeding the Database
  6. 11.6. Full-Text Search Across Tickets
  7. 11.7. Connection Pooling for Serverless
  8. 11.8. Aside: MongoDB as an Alternative
  9. Summary

12. Authentication and Authorization

  1. 12.1. The Problem: Open Doors Everywhere
  2. 12.2. Auth.js: The Authentication Layer
  3. 12.3. Google OAuth: Setting Up the Provider
  4. 12.4. Session Management
  5. 12.5. Protecting Routes with the Proxy
  6. 12.6. Scope-Based Access Control
  7. 12.7. Two Flows: Customer Portal and Agent Dashboard
  8. 12.8. The Trade-offs of Email and Password
  9. 12.9. Aside: Auth0 as an Alternative
  10. Summary

13. Forms, Validation, and File Management

  1. 13.1. The Problem: Forms That Fight Back
  2. 13.2. React Hook Form: Type-Safe Form State
  3. 13.3. Zod: One Schema, Both Sides
  4. 13.4. Aside: Joi as an Alternative
  5. 13.5. Rich Text with Tiptap
  6. 13.6. File Uploads with S3 Presigned URLs
  7. 13.7. The Complete Forms
  8. Summary

14. Email, State Management, and Real-Time

  1. 14.1. Three Missing Pieces
  2. 14.2. Transactional Emails with AWS SES
  3. 14.3. State Management with Zustand
  4. 14.4. SWR for Server State
  5. 14.5. Dashboard Visualizations with Recharts
  6. 14.6. Activity Feed and Webhook Dispatch
  7. 14.7. Real-Time Updates with Server-Sent Events
  8. 14.8. SLA Countdown Timer
  9. Summary

Get the free sample chapters

Click the buttons to get the free sample in PDF or EPUB, or read the sample online here

Download Sample PDFDownload Sample EPUB

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $15 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub