Inside Next.js: From Source Code to Browser

The 60-second version

Short on time? Here is the whole guide as a tweet-sized thread. Copy one, or copy all.

The Big Picture

Ten steps from “I wrote code” to “The page works when I click.” Tap each step on the left.

Route Discovery

Folder names on your computer become website addresses (URLs).

Dependency Graph

Pages use pieces (components). Pieces can use smaller pieces. That’s a “who needs who” map.

SWC Compiler

Browsers don’t speak JSX. SWC translates your code super fast.

React Server Components

Some work happens on a big computer far away — not in your pocket phone browser.

async function Page() {
  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

Client Components

Interactive bits (clicks, typing) need JavaScript downloaded to the browser.

React Flight

The server sends recipe cards, not the whole kitchen.

Page
├ Hero
├ Sidebar
└ Dashboard

M1:{"id":"./Hero","chunks":["M2"]}
M2:["$","section",null,{"children":"..."}]

Bundling

Pack JavaScript into suitcases (chunks) so visitors download only what they need.

Webpack vs Turbopack

When you change one file, how much does the tool rebuild?

Simulated dev rebuild after editing one file. Real times vary by project size.

Build Output

After next build, Next.js leaves a .next folder — the packed lunch for production.

Select a folder or file

Request Lifecycle

What happens when someone visits your site — step by step.

Hydration Simulator

The page looks ready before buttons truly work.

Cache System

Remember answers so you don’t ask the library the same question every second.

Build Your Own Next.js

Next.js is really six jobs. Match each job to its slot.

Final Summary

You made it! Here’s the whole story in one breath.

Middleware

Code that runs before a page, for matching URLs only.

export function middleware(req) {
  if (!req.cookies.has('session') && req.nextUrl.pathname.startsWith('/dashboard'))
    return NextResponse.redirect(new URL('/login', req.url))
  if (req.nextUrl.pathname === '/old-blog')
    return NextResponse.rewrite(new URL('/blog', req.url))
  return NextResponse.next()
}
export const config = { matcher: ['/((?!api|_next).*)'] }

Server Actions

Submit a form and run a function on the server — no hand-written API route.

async function addTodo(formData) {
  'use server'
  await db.todos.create({ title: formData.get('title') })
  revalidatePath('/todos')
}

Streaming & Suspense

Send the page in pieces so slow parts never block fast parts.

<Header />
<Suspense fallback={<Skeleton />}><Reviews /></Suspense>
<Suspense fallback={<Skeleton />}><Recommendations /></Suspense>

Rendering Strategies

SSG, SSR, ISR, PPR — pick by who sees the page and how often it changes.

Node vs Edge Runtime

Where your server code runs decides which tools it can use.

export const runtime = 'edge' // or 'nodejs'

Glossary

Search terms you hear in Next.js docs — each with a simple line and a precise line.