Project Structure
This page provides an overview of the file and folder structure of a Next.js project. It covers top-level files and folders, configuration files, and routing conventions within the app and pages directories.
This page contents are inspired from NextJS's official documentation. (here)
Top Level Folders
app | App Router |
pages | pages Router |
public | Static assets |
src | Optional application source folder |
Top Level Files
next.config.js | Configuration file for Next.js |
package.json | Project dependencies and scripts |
.gitignore | Git files and folders to ignore |
next-env.d.ts | TypeScript declaration file for Next.js |
jsconfig.json | tsconfig.json | Configuration file for JavaScript/TypeScript |
tailwind.config.js | Configuration file for Taildwind Css. |
.eslintrc.json | Configuration file for ESLint |
README.md | Readme File for GitHub. |
Routing Files
layout | .js.jsx.ts.tsx | Layout |
page | .js.jsx.ts.tsx | Page |
loading | .js.jsx.ts.tsx | Loading UI |
error | .js.jsx.ts.tsx | Error UI |
route | .js.ts | API Endpoint |
default | .js.jsx.ts.tsx | Parallel route fallback page |
not-found | .js.jsx.ts.tsx | Not Found UI |
Nested Routes
folder | Route Segment |
folder/folder | Nested Route Segment |
Dynamic Routes
[folder] | Dynamic Route Segment |
[...folder] | Catch-all route segment |
[[...folder]] | Optional Catch-all route segment |
Warning : All of these above are only applicable for latest App Router (Next v13+)