Next.js Guide: App Router, Server Components and Deploying
The App Router changed how Next.js apps work, and the caching rules trip up many developers. This guide follows the Next.js series from your first route to production, with every example run on the same Next.js version this site uses.
Read the Server and Client Components lesson carefully before the others: most later ideas build on it.
Who it is for: React developers moving to Next.js, full-stack developers shipping Next.js apps, and candidates preparing for Next.js interviews.
14 lessons · Published by Jainik · Last updated
1. Routing and components
- 1. React in Depth · 12 minThinking in React: Components, Props and JSX
What React is, how JSX becomes function calls, components as functions, props, and the one-way data flow.
- 2. Next.js App Router · 13 minNext.js From Zero: Project Structure, Routing and Layouts
What Next.js adds to React, the app folder, pages, layouts, dynamic routes, links and navigation, and the files with special names.
- 3. Next.js App Router · 16 minServer Components and Client Components: What Runs Where
Server by default, what use client really means, the boundary, passing props across it, and the mistakes that leak secrets or bloat the bundle.
2. Data, caching and mutations
- 4. Next.js App Router · 16 minData Fetching and Caching in the App Router
Fetching in Server Components, parallel versus sequential requests, the caching layers, revalidation, and the current Next.js caching model from the bundled docs.
- 5. Next.js App Router · 15 minServer Actions, Forms and Mutations
Forms that call server functions, validation, pending and error states, revalidating after a change, and the security rules for actions.
- 6. Next.js App Router · 14 minRoute Handlers, Middleware (Proxy) and APIs
Writing API endpoints, request and response helpers, the request interception layer in this Next.js version, headers, redirects and rewrites.
3. Auth and rendering
- 7. Next.js App Router · 15 minAuthentication and Authorization in Next.js
Sessions with cookies, checking auth close to the data, protecting routes and actions, and the common mistakes.
- 8. Next.js App Router · 15 minRendering Modes: Static, Dynamic, Streaming and Suspense
Static and dynamic rendering, how Next.js decides, loading UI and streaming, partial prerendering ideas, and generateStaticParams.
- 9. Security for Developers · 16 minPasswords and Login: Hashing, Sessions, MFA and Rate Limits
Why you never store passwords, hashing with a salt (scrypt and Argon2), safe sessions and JWT mistakes, password reset flows, MFA, and stopping brute force.
- 10. Security for Developers · 14 minAccess Control: IDOR, Roles and Mass Assignment
The number one web risk: checking who you are but not what you may do. IDOR with a real example, deny by default, roles and ownership checks, and mass assignment.
4. SEO, config and deployment
- 11. Next.js App Router · 14 minMetadata, SEO, Images and Fonts
The Metadata API, sitemap and robots, Open Graph images, next/image and next/font, and Core Web Vitals habits.
- 12. Next.js App Router · 14 minEnvironment, Configuration, Deploying and Production Habits
Environment variables and what reaches the browser, next.config, building and running, deploying to Vercel and to a container, logging and monitoring.
5. Interview practice
- 13. Next.js App Router · 16 minNext.js Interview Questions With Model Answers
Rendering, caching, Server Components, actions, and the traps interviewers like, with model answers.
- 14. Full-Stack Questions · 34 minNext.js Interview Questions
App Router, Server and Client Components, caching, Server Actions, proxy, rendering modes and deployment.
More reading orders are on the guides page, and every series is listed on the home page.