Understanding Next.js: A Front-End Developer's Guide to the Modern Web Framework

This series takes you from "I ran create-next-app and it works" to "I understand exactly what every line of my framework is doing at the protocol level."

• Explain a Next.js HTTP request end-to-end: chunk structure, RSC Payload format, hydration matching
• Understand the rendering hierarchy: layout, page, template, error, loading — when each runs and why
• Decide confidently whether a component belongs on the server or the client

You should have built a basic SSR framework from scratch, or at least understand renderToString, Webpack bundling, and hydrateRoot.

The series is organized from the rendering engine upward. Start with Article 1 — it's the foundation for everything that follows.

The RSC Payload format, Flight protocol, renderToReadableStream vs renderToString, Client Component double rendering, and the four types of content in a streaming response.

The six special file types (layout, page, template, error, loading); their rendering hierarchy; [slug] dynamic routes; generateStaticParams; route groups and private folders.

The 'use client' module graph boundary; interleaving Server Components as children of Client Components; Context Provider bridging; environment guarding with server-only.

HTTP chunked transfer encoding in detail; <template> placeholder and $RC swap mechanism; the static shell principle; the critical push-down pattern.

Viewport-based prefetch scheduling; static vs. dynamic route prefetch differences; RSC: 1 client-side navigation; useLinkStatus for slow-network feedback.

ISR lifecycle with revalidate; cache() for request-level deduplication; staleTimes client-side cache; on-demand revalidation with revalidatePath and revalidateTag.

Each article stands alone, but concepts build on each other. If you only have time for two: read Article 1 (the rendering model) and Article 4 (Streaming). These two will permanently change how you think about server rendering.

This series is a companion to the Network series — one covers how data travels between machines, this one covers how your framework generates it.