Project Structure
A freshly scaffolded App Router project has a small, predictable set of top-level files and folders. Learning what each one is for makes the rest of the framework much easier to reason about, because Next.js relies heavily on where a file lives — not just what is inside it.
Top-level layout
Default project structure
my-app/ ├── app/ # Routes, layouts, and UI — the heart of the app │ ├── layout.tsx # Root layout, wraps every page │ ├── page.tsx # The homepage, served at "/" │ └── globals.css # Global stylesheet imported by the root layout ├── public/ # Static assets served as-is (images, favicon, etc.) ├── next.config.js # Next.js configuration ├── package.json # Dependencies and npm scripts ├── tsconfig.json # TypeScript configuration (if using TypeScript) └── node_modules/ # Installed dependencies
Item | Purpose |
|---|---|
| Where routes live. Every folder can hold a |
| Files here are served from the site root unmodified — |
| Central place to configure image domains, redirects, headers, experimental features, and more. |
| Standard Node.js manifest — dependencies plus the |
Inside app/
layout.tsx— the root layout. It must render<html>and<body>, and wraps every page in the application.page.tsx— the actual UI for a route. A folder only becomes a visitable URL if it contains one of these.globals.css— a plain CSS file imported once, in the root layout, and applied everywhere.
The optional src/ directory
Many teams prefer to keep application code separate from configuration files sitting at the project root. Next.js supports this by letting you move app/ (and public/, conventionally left outside) into a src/ folder — src/app/page.tsx works exactly the same as app/page.tsx. This is purely an organizational choice with no effect on routing behavior; this site's own codebase uses this convention.