Leanpub Header

Skip to main content
Go to Leanpub.com

Next.js – The Comprehensive Guide

From React Fundamentals to AI-Powered Full-Stack Apps

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

$12.99

$19.99

You pay

$19.99

Author earns

$15.99
$

...Or Buy With Credits!

You can get credits with a paid monthly or annual Reader Membership, or you can buy them here.
PDF
EPUB
WEB
357
Pages
84,525Words
About

About

About the Book

Build a production-ready, AI-powered Next.js application from scratch. One cohesive project, 28 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. No other Next.js book teaches this.

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. Internationalization, the Next.js ecosystem, AI-assisted development with Claude Code

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:

  • Introduction (About the Author, Why This Book, How to Read This Book, Prerequisites)
  • Chapter 1: TypeScript, Quick Start for Experienced Developers
  • Chapter 2: Modern JavaScript for TypeScript Developers
  • Chapter 3: React, Fundamentals and Mental Model
  • Chapter 4: Advanced React
  • Chapter 5: Next.js, Getting Started and Project Structure
  • Chapter 6: Routing and Navigation
  • Chapter 7: Understanding Rendering Strategies
  • Chapter 8: Data Fetching
  • Chapter 9: Styling and UI Components

🔜 Coming next:

  • Part III (Chapters 10 to 14): Database, authentication, forms, email, real-time
  • Part IV (Chapters 15 to 19): AI features with the Vercel AI SDK
  • Part V (Chapters 20 to 25): Testing, security, monitoring, deployment
  • Part VI (Chapters 26 to 28): i18n, ecosystem, Claude Code

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. A Note on the State of This Book
  9. Conventions in This Book
  10. 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 You Have
  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

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.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

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 $14 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