Project Structure
Understand the key files and folders create-next-app generates.
A fresh App Router project has a small, predictable layout. The most important folder is app/, which holds your routes.
Key locations
app/— routes, layouts, and pages (the App Router).app/layout.tsx— the required root layout wrapping every page.app/page.tsx— the home page (the/route).public/— static assets served from the site root.next.config.ts— framework configuration.package.json— scripts and dependencies.
Example
my-app/
├─ app/
│ ├─ layout.tsx # root layout (required)
│ ├─ page.tsx # the / route
│ └─ globals.css
├─ public/ # static files (images, favicon)
├─ next.config.ts
├─ tsconfig.json
└─ package.jsonWhen to use it
- A new team member quickly locates database queries in lib/ and shared components in components/ without needing a tour.
- A developer adds a new feature by creating a folder in app/ and colocating its component, test, and styles together.
- A CI pipeline reads next.config.ts and .env.local to confirm environment variables are present before deploying.
More examples
App Router file tree overview
The app/ folder drives routing while public/ and lib/ hold assets and shared helpers respectively.
my-app/
├── app/
│ ├── layout.tsx # root layout
│ ├── page.tsx # homepage
│ └── dashboard/
│ └── page.tsx # /dashboard
├── public/ # static assets
├── lib/ # utility functions
├── next.config.ts
└── tsconfig.jsonColocation pattern in app/
Non-route files inside app/ are invisible to the router, so you can keep related code together without polluting URLs.
app/
└── products/
├── page.tsx # route
├── ProductCard.tsx # colocated component
└── products.test.ts # colocated testPath alias in tsconfig
The @/* alias lets any file import from the project root without brittle relative paths.
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
Discussion