You've typed this a hundred times. You wait. A web page appears at localhost:3000.
You can build a whole app this way. But if someone asked what happened in those three seconds, could you answer?
This is a walk through the entire JavaScript web stack: Node, npm, TypeScript, bundlers, React, Next.js, the database. Each one exists because the layer below it hurt. You'll poke each layer until it's obvious why it's there.
Not lines of code. Programs: distinct tools that each did a job between npm run dev and the page in your tab.
About seven. And roughly a thousand packages they leaned on.
npm read a script → Node started → Next.js's server booted → the bundler (Turbopack) walked your imports → SWC, inside the bundler, stripped your types and rewrote your JSX → React rendered your components on the server → the browser ran the JavaScript and React attached itself to the HTML.
Seven is a fair count, not a precise one. The point is that the thing you typed is a doorbell, and a building answered.
In a browser tab. And in Node, on your laptop or a server. Everything else in the ecosystem is tooling built around that fact.
Where does each one run? Pick a tool, then click a room. Some need two rooms; one needs neither of the two.
The browser runs JavaScript, but your code has to come from somewhere and a tab can't read files. So: Node and npm. Plain JavaScript lets you pass a string where a number goes, silently. So: TypeScript. Now you have 300 files a browser can't load. So: a bundler. It loads, and touching the page by hand is miserable. So: React. React draws pages but has no idea what a URL or a server is. So: Next.js.
Walk up from the bottom and each layer will feel inevitable. Or jump to the one that itches. The m key opens this map from anywhere, and every deck remembers where you left it.
Recommended order if you want the whole story: Browser → Node → TypeScript → Bundler → React → Next.js → Stacks → Napkin.