Understanding Project Structure
Tour the folders and files a Next.js App Router project generates, and what each one is responsible for.
Top-Level Layout
my-app/├── app/│ ├── layout.tsx│ ├── page.tsx│ └── globals.css├── public/├── next.config.js├── package.json├── tsconfig.json (or jsconfig.json)└── node_modules/Everything that becomes a URL in your app lives inside app/. Everything served as-is (images, favicons) lives inside public/. Configuration for the whole project sits at the root.
Inside app/
| File | Purpose |
|---|---|
| layout.tsx | Shared UI that wraps every page below it — html/body tags, navigation, footers. |
| page.tsx | The unique UI for a route — this is what makes a folder "visitable" as a URL. |
| globals.css | CSS applied across the whole app, imported once in the root layout. |
| loading.tsx | Optional — a loading UI shown automatically while a route's data loads. |
| error.tsx | Optional — a fallback UI shown automatically if a route throws an error. |
| not-found.tsx | Optional — a custom 404 UI for a route segment. |
A folder under app/ only becomes a visitable route once it contains a page.tsx file. A folder with only a layout.tsx or components has no URL of its own.
The public/ Folder
Files placed in public/ are served exactly as-is from the root URL. A file at public/logo.png is reachable at /logo.png — no import or processing needed.
Configuration Files
- next.config.js — project-wide settings: image domains, redirects, experimental flags.
- package.json — dependencies and npm scripts (dev, build, start, lint).
- tsconfig.json / jsconfig.json — path aliases (like @/components) and compiler options.
- .eslintrc.json — linting rules, generated if you opted into ESLint.
Common Beginner Mistakes
Remember: the folder name becomes the URL segment, not the file name — app/about/page.tsx renders at /about, not /page.
Static assets belong in public/ so they're served directly; app/ is for route and component code.
FAQs
Yes — loading.tsx, error.tsx, and not-found.tsx are all optional. Next.js only uses them if they exist.
They're two different routing systems. This course uses app/ (the App Router), which is the current recommended default.
Summary
The app/ folder is the heart of a Next.js project — its structure directly defines your app's routes. Next, you'll go deeper into how the App Router itself works.