Next.js — Complete Deep-Dive Tutorial Index

Hey everyone! Welcome to the Next.js deep-dive series! 🙏

This is the complete chapter-by-chapter index. If you already know React and are wondering "how much of this is actually new, and how deep does it go," this series answers that fully — from "what is Next.js" all the way down to the four caching layers and what really crosses the network when a Server Component renders.

No hand-waving. Every chapter follows the same shape: plain-English idea → ASCII diagram → real code → common mistakes → key points.

📖 Read the full series on the blog: shreyashkolhe.blogspot.com/search/label/nextjs

┌─────────────────────────────────────────────────────────────────┐
│                 NEXT.JS — ROADMAP                                │
├─────────────────────────────────────────────────────────────────┤
│                                                                   │
│  PART 1 — FOUNDATIONS         (Chapters 01 – 03)                 │
│  PART 2 — THE CORE MODEL      (Chapters 04 – 06)                 │
│  PART 3 — BUILDING FOR REAL   (Chapters 07 – 10)                 │
│  DEEP DIVES — UNDER THE HOOD  (Rendering & Caching internals)    │
│  BONUS — INTERVIEW Q&A                                           │
│                                                                   │
└─────────────────────────────────────────────────────────────────┘

Legend: ✅ = ready to read

PART 1 — Foundations

Ch.	Title	What You'll Learn	Key Concept	Status
01	What is Next.js (and Why Does It Exist)?	What plain React does NOT give you · The problems Next.js was built to solve · React vs Next.js, compared directly · "Framework" vs "library" — why file names suddenly matter	Next.js is React + routing + rendering + optimization, as conventions.	✅ Done
02	Setup & the App Router Project Structure	Creating a project with create-next-app · Reading the app/ folder structure · Special files: page, layout, loading, error, route · Route groups (name) and private folders _name	The folder path IS the URL path.	✅ Done
03	Routing Deep Dive	Dynamic segments [param], catch-all [...param], optional [[...param]] · How nested layouts stack on a route · Link vs plain <a>, and automatic prefetching · Programmatic navigation with useRouter	One file can match infinite URLs.	✅ Done

PART 2 — The Core Model

Ch.	Title	What You'll Learn	Key Concept	Status
04	Server Components vs Client Components	Server Components are the DEFAULT — no import needed · What each type can and can't do · The "use client" directive, precisely defined · The correct pattern for mixing them	The biggest mental shift coming from plain React. Read this one twice.	✅ Done
05	Data Fetching & Caching	fetch() directly in a Server Component, no useEffect · Next.js's extended fetch() cache options · Time-based and on-demand revalidation · The parallel-vs-sequential await performance trap	Caching in Next.js is opt-OUT, not opt-in — know the defaults.	✅ Done
06	Rendering Strategies: SSR, SSG, ISR & CSR	All four strategies, as timelines · How Next.js infers which one to use, automatically · generateStaticParams — pre-building dynamic routes · Streaming with Suspense	Rendering mode is a CONSEQUENCE of how you fetch data, not a setting.	✅ Done

PART 3 — Building For Real

Ch.	Title	What You'll Learn	Key Concept	Status
07	loading.js, error.js & not-found.js	Automatic Suspense boundaries per route · Automatic error boundaries, and the reset() function · notFound() and correct 404 status codes	Three filenames replace all the manual boundary-wiring you did in plain React.	✅ Done
08	Route Handlers & Server Actions	route.js — building a real API endpoint · Server Actions — mutating data with no API at all · Calling Server Actions from buttons, not just forms · When to use which	Route Handlers are public APIs; Server Actions are internal mutations.	✅ Done
09	Middleware & Metadata (SEO)	Middleware — code that runs before a request reaches a route · Auth gating, redirects, localization, A/B testing · Static metadata export and dynamic generateMetadata	Metadata is server-rendered into real HTML — search engines see it with no JS.	✅ Done
10	Image & Font Optimization	What plain <img> silently costs you · next/image — resizing, formats, lazy-loading, zero layout shift · next/font — self-hosted fonts, no flash of unstyled text	These aren't nice-to-haves — they're real Core Web Vitals score.	✅ Done

DEEP DIVES — Under the Hood

"This is the part that separates 'I've used Next.js' from
 'I understand Next.js.'"

Ch.	Title	What You'll Learn	Key Concept	Status
Deep Dive 01	What Actually Happens When a Server Component Renders	The RSC Payload — what really crosses the network · Why Client Components appear as references, not code · Hydration, precisely explained · Why re-navigating doesn't re-download everything	A Server Component produces DATA describing UI, not just HTML.	✅ Done
Deep Dive 02	The Four Caching Layers in Next.js	Request Memoization, Data Cache, Full Route Cache, Router Cache · How they build on top of each other · A real "why is my data stale" debugging walkthrough	Four DIFFERENT caches, four different lifetimes — know all four.	✅ Done

BONUS

Ch.	Title	What You'll Learn	Key Concept	Status
Bonus	Next.js Interview Questions & Answers	19 questions covering every chapter in this series · Model answers you can say out loud · The one question underneath all of them	"Does this code need to run in the browser?" — everything else follows from this.	✅ Done

How to Use This Series

1. Go in order — Part 2 (the core model) only makes sense after Part 1.
2. Chapter 04 (Server vs Client Components) is THE most important
   chapter. Read it twice. Every later chapter assumes you get it.
3. Chapters 04, 05, 06, and Deep Dive 02 are one connected story:
   where code runs → how data is fetched → how that decides
   rendering mode → how it's all cached. Don't skip between them.
4. Actually build something after Chapter 03 (basic routing) and
   again after Chapter 08 (mutations) — reading isn't the same
   as having typed it yourself.
5. Save the Bonus interview chapter for last, as a recap, not a shortcut.

Keep coding, keep shipping! See you in the chapters!