App Router file structure in Next.js
From the Next.js cheat sheet · Project Setup & Structure · verified Jul 2026
App Router file structure
text
app/
├── layout.tsx # Root layout
├── page.tsx # Home page (/)
├── loading.tsx # Loading UI
├── error.tsx # Error UI
├── not-found.tsx # 404 page
├── global.css # Global styles
├── about/
│ └── page.tsx # /about route
├── blog/
│ ├── layout.tsx # Nested layout
│ ├── page.tsx # /blog route
│ └── [slug]/
│ └── page.tsx # Dynamic route /blog/[slug]
└── api/
└── route.ts # API route💡 page.tsx defines a route
⚡ layout.tsx wraps pages and preserves state
📌 loading.tsx shows while page loads
🔥 error.tsx handles errors with error boundary