← Back to Next.js overview

Hand-written tutorials, ordered as a recommended learning path.

1. 21 Server Actions File Upload Handle file uploads in Next.js using server actions. Covers FormData, validation, cloud storage integration, progress tracking, and error handling. 6 min read →
2. 22 Streaming & PPR Learn how Next.js streaming SSR and partial prerendering work together to deliver fast initial loads with dynamic content that streams in progressively. 7 min read →
3. 23 Testing with Playwright Set up Playwright for end-to-end testing of Next.js applications. Covers configuration, writing tests, handling auth, and CI integration. 7 min read →
4. 24 Auth Patterns A practical guide to authentication in Next.js: NextAuth.js setup, middleware-based auth, server component auth checks, JWT vs session strategies, and protecting routes at every level. 9 min read →
5. 25 Caching Strategies A practical guide to Next.js caching: the data cache, full route cache, router cache, revalidation strategies, cache tags, and how to control caching behavior at every level. 10 min read →
6. 26 Middleware Guide Everything you need to know about Next.js middleware: how it works, matchers, redirects, rewrites, authentication checks, geolocation, rate limiting, and common patterns for production apps. 10 min read →
7. 27 Parallel Routes A complete guide to parallel routes in Next.js App Router: @slots, simultaneous rendering, conditional slots, loading and error states, intercepting routes, and advanced layout patterns. 8 min read →
8. 28 Error Boundaries How error.tsx, global-error.tsx, and not-found.tsx work in the Next.js App Router — when each one fires, how segments isolate failures, and patterns for recovery and observability. 4 min read →
9. 29 Caching Walk through the four caching layers in Next.js App Router and learn how to choose static, ISR, dynamic, or per-request fetch caching. 4 min read →
10. 30 Dynamic Routes Master dynamic routes, catch-all segments, and optional catch-alls in Next.js. Learn how the file-based router maps URLs to components with concrete examples. 4 min read →
11. 31 Data Fetching Compare the main Next.js data fetching strategies and learn when to use server components, route handlers, SWR, or static generation in your apps. 5 min read →
12. 32 Deploy on Vercel A hands-on walkthrough for shipping a Next.js app to Vercel — connecting Git, configuring environment variables, understanding preview deployments, and avoiding the usual production gotchas. 4 min read →
13. 33 Edge Config Use Vercel Edge Config to serve feature flags, redirects, and small config blobs from the edge with single-digit-millisecond reads — when to use it, how it differs from KV, and a working example. 4 min read →
14. 34 Form Actions How Next.js Server Actions replace API routes for form submissions — progressive enhancement, useFormState and useFormStatus, validation, revalidation, and avoiding the most common mistakes. 5 min read →
15. 35 next/image Learn how the next/image component handles responsive sizing, lazy loading, format conversion, and caching to ship faster sites. 4 min read →
16. 36 Env Vars Learn how Next.js loads environment variables, when they are exposed to the browser, and how to keep secrets out of your client bundle. 4 min read →
17. 37 i18n Tutorial Add multi-language support to a Next.js App Router project with locale routing, message catalogs, and SEO-friendly URLs that scale to dozens of languages. 4 min read →
18. 38 ISR vs SSR vs SSG A clear comparison of static, server-rendered, and incrementally regenerated pages in Next.js, with rules for choosing the right strategy. 5 min read →
19. 39 Middleware What Next.js middleware actually is, how it runs on the Edge, what you can and cannot do there, and the patterns that work in production. 5 min read →
20. 40 Turborepo Set up a fast, cache-friendly Next.js monorepo using Turborepo. Share UI, config, and types between apps without sacrificing build performance. 4 min read →