The anatomy of a Next.js request
A Next.js app is one program orchestrated across a build pipeline, a server runtime, and the browser. Node.js is the host process; React is the renderer; Next.js is the conductor that decides where code runs, when it runs, what gets cached, and what actually crosses the wire. Click any block in the diagram, any layer card, or any highlighted term to open it up.
Three regions. Two computers. One wire.
Next.js is one program that runs across two computers — a trusted server and an untrusted browser — joined by a single wire. A build region compiles your source once and ships 0 kb of itself. Then follow the signal: a request lands on the runtime, descends the server, crosses the once as a stream of HTML and , paints and in the browser, then loops back across the top the moment a or navigation fires. The trace thickens with the client JavaScript it carries — hairline across the server (0 kb), heaviest at hydration. Tap any node to open its detail.
signal = one request · trace weight = client JS shipped · hairline on the server, heaviest at hydration · the loop closes on the round-trip
What actually crosses: the RSC payload
Everything upstream collapses into this — a stream of numbered Flight rows. Data is inlined,
client islands become $L import references, and Server Actions become opaque $F handles whose
bodies never ship. itap any token for a context-aware note — or hit the
floating i to reveal every annotation at once.
0:[ "$","main",null,{"children":[ ["$","h1",null,{"children":"The Future of React"}], ["$","$L1",null,{"comments":[{"id":1,"body":"Great post!"}]}], ["$","$L2",null,{"postId":42,"onLike":"$F3"}], ["$","$Sreact.suspense",null,{"fallback":["$","p",null,{"children":"Loading…"}],"children":"$L5"}]]}]1:I{"id":"./CommentSection.js","chunks":["chunk:abc"],"name":"CommentSection"} // client ref2:I{"id":"./LikeButton.js","chunks":["chunk:def"],"name":"LikeButton"}3:{"id":"likePost","bound":null} // server action — body stays on the server5:[ "$","section",null,{"children":"…resolved comments…"}] // $L5 streams in later
Eleven layers, top to bottom
Each card opens a full detail panel — explanation, real code, and an interactive trace you can scrub. The same panels open from the diagram above.
Glossary
Every highlighted term across the page resolves here. Click one to pin its definition; many definitions link onward to others.