Next.js App Router

A blog series

Next.js App Router From Zero to Production

Next.js 16 the practical way: routing and layouts, Server and Client Components, data fetching and caching, Server Actions and forms, route handlers, middleware and auth, performance and SEO, and deploying. Based on the official docs, with every example run.

Started 
2026
Lessons 
10
Reading 
~2 h

Contents

Every lesson has the same steps: what it is, how it works, a real example, common mistakes, then interview questions with answers you can say out loud.

  1. Lesson 00Next.js From Zero: Project Structure, Routing and LayoutsWhat Next.js adds to React, the app folder, pages, layouts, dynamic routes, links and navigation, and the files with special names.13 min
  2. Lesson 01Server Components and Client Components: What Runs WhereServer by default, what use client really means, the boundary, passing props across it, and the mistakes that leak secrets or bloat the bundle.16 min
  3. Lesson 02Data Fetching and Caching in the App RouterFetching in Server Components, parallel versus sequential requests, the caching layers, revalidation, and the current Next.js caching model from the bundled docs.16 min
  4. Lesson 03Server Actions, Forms and MutationsForms that call server functions, validation, pending and error states, revalidating after a change, and the security rules for actions.15 min
  5. Lesson 04Route Handlers, Middleware (Proxy) and APIsWriting API endpoints, request and response helpers, the request interception layer in this Next.js version, headers, redirects and rewrites.14 min
  6. Lesson 05Authentication and Authorization in Next.jsSessions with cookies, checking auth close to the data, protecting routes and actions, and the common mistakes.15 min
  7. Lesson 06Rendering Modes: Static, Dynamic, Streaming and SuspenseStatic and dynamic rendering, how Next.js decides, loading UI and streaming, partial prerendering ideas, and generateStaticParams.15 min
  8. Lesson 07Metadata, SEO, Images and FontsThe Metadata API, sitemap and robots, Open Graph images, next/image and next/font, and Core Web Vitals habits.14 min
  9. Lesson 08Environment, Configuration, Deploying and Production HabitsEnvironment variables and what reaches the browser, next.config, building and running, deploying to Vercel and to a container, logging and monitoring.14 min
  10. Lesson 09Next.js Interview Questions With Model AnswersRendering, caching, Server Components, actions, and the traps interviewers like, with model answers.16 min

Glossary

66 terms used in this series. Inside any lesson, hover or tap a dotted term to see its meaning without leaving the page. Browse all terms →