One command kicks off a long, ordered pipeline: load config, find every route, compile your TypeScript and JSX with Rust-based tooling, trace the module graph, prune dead code, split it into chunks, minify, and pre-render pages to HTML. This is a precise tour of every stage — top to bottom, in execution order.
Same eleven stages — but sized by where the wall-clock actually goes, not by sequence. The whole bar is one next build; each slice is a stage's real share of build time. Hover a slice or row to link them; click any stage to open its full breakdown.
Read it as a budget — compile dominates, input & output are nearly free · click a stage to dive in · Esc closes any panel
The same stages as cards. Each opens a structured breakdown: what it does, the precise mechanism, how the artifact flows to the next stage, the knobs you control, and the traps that bite teams in production.
If you remember nothing else: next build turns source you can read into artifacts a CDN can serve — by compiling, tracing, pruning, splitting, and pre-rendering, in that order.
$ next build ▲ Next.js 16.0.0 (Turbopack) ✓ Compiled successfully ✓ Linting and checking validity of types ✓ Collecting page data ✓ Generating static pages (24/24) ✓ Finalizing page optimization ✓ Collecting build traces
Stages 1–4 figure out what your app is: config, routes, compiled JS, and the module graph linking it all. Nothing is optimized yet — it's pure understanding.
Stages 5–8 make it small: drop dead code, split into per-route chunks, optimize assets, minify. Every byte a user won't need is removed here.
Stages 9–11 make it fast: pre-render pages to HTML, pick per-route strategies, and write the whole thing to .next/ with manifests your host reads.