Skip to content
Pages RouterGetting StartedProject Structure

Project Structure and Organization

This page provides an overview of the folder and file conventions in Next.js, as well as tips for organizing your project.

Folder and file conventions

Top-level folders

Top-level folders are used to organize your application's code and static assets.

Route segments to path segments
appApp Router
pagesPages Router
publicStatic assets to be served
srcOptional application source folder

Top-level files

Top-level files are used to configure your application, manage dependencies, run middleware, integrate monitoring tools, and define environment variables.

Next.js
next.config.jsConfiguration file for Next.js
package.jsonProject dependencies and scripts
instrumentation.tsOpenTelemetry and Instrumentation file
middleware.tsNext.js request middleware
.envEnvironment variables
.env.localLocal environment variables
.env.productionProduction environment variables
.env.developmentDevelopment environment variables
.eslintrc.jsonConfiguration file for ESLint
.gitignoreGit files and folders to ignore
next-env.d.tsTypeScript declaration file for Next.js
tsconfig.jsonConfiguration file for TypeScript
jsconfig.jsonConfiguration file for JavaScript

Files conventions

_app.js .jsx .tsxCustom App
_document.js .jsx .tsxCustom Document
_error.js .jsx .tsxCustom Error Page
404.js .jsx .tsx404 Error Page
500.js .jsx .tsx500 Error Page

Routes

Folder convention
index.js .jsx .tsxHome page
folder/index.js .jsx .tsxNested page
File convention
index.js .jsx .tsxHome page
file.js .jsx .tsxNested page

Dynamic routes

Folder convention
[folder]/index.js .jsx .tsxDynamic route segment
[...folder]/index.js .jsx .tsxCatch-all route segment
[[...folder]]/index.js .jsx .tsxOptional catch-all route segment
File convention
[file].js .jsx .tsxDynamic route segment
[...file].js .jsx .tsxCatch-all route segment
[[...file]].js .jsx .tsxOptional catch-all route segment