Next.js

Full-stack React framework built on Server Components. App Router is server-first by default, with streaming, server actions, and Turbopack as the standard dev experience since v16.

Overview

• What: Full-stack React framework by Vercel
• Install: npx create-next-app@latest
• Routing: App Router (filesystem-based, app/ directory)
• Rendering: Server Components by default, “use client” opt-in for interactivity
• Bundler: Turbopack (default since v16, 5-10x faster than Webpack)
• Deploy: Vercel (optimized), self-hosted Node, Docker, static export

Contents

• Concepts - How Next.js works
  • App Router - Server-first routing, file conventions, nested layouts
  • Server Components - Async data fetching, “use client” boundaries
  • Caching - fetch defaults, “use cache” directive, Cache Components
• Quickstart - Get started
  • Setup - Create a project, Turbopack dev server, Tailwind CSS
  • First App - Build a blog with layouts, dynamic routes, server actions
• Deep Dives - Advanced patterns
  • Server Actions - Mutations, useActionState, progressive enhancement
  • Streaming - Suspense boundaries, loading states, runtime choices
  • Turbopack - Performance, File System Caching, Webpack migration
  • Cache Components - “use cache” directive, cacheLife, PPR integration
• Notes - Tips and gotchas
  • Gotchas - Breaking changes, async params, migration pitfalls

Resources

• Next.js docs
• Next.js GitHub
• Next.js Blog
• Vercel Templates