Next.js Internals

Understand what happens under the hood when you build with Next.js

The Next.js Pipeline

Follow the journey from create-next-app to an interactive page in the browser. Click each stage to see what happens under the hood.

The Full Pipeline

Click any stage above to explore what happens at each step

What create-next-app Gives You

package.json

Project manifest with scripts and dependencies

next.config.ts

Framework configuration (redirects, env, plugins)

tsconfig.json

TypeScript compiler settings and path aliases

src/app/layout.tsx

Root layout wrapping all pages

src/app/page.tsx

Home page route ( / )

tailwind.config.ts

Utility-first CSS framework configuration

Learning Philosophy

This guide focuses on building a mental model of what Next.js does behind the scenes. Understanding the pipeline — from scaffold to hydration — makes debugging intuitive and configuration decisions obvious. You don't need to memorize flags; you need to understand the flow.