Next.js - Folder Structure

---

---

Folder Structure

Next.js folder structure is based on routing system. The routing system in Next.js is file-based, which means the file structure inside the pages/ or app/ directory determines the application routes automatically. Following diagram shows basic structure of Next.js App router project.

nextjs-app-router/
     app/                      // Root folder for App Router
        counter/              // Folder for Counter Page
           page.tsx
        page.tsx
     public/ 
     next.config.js
     package.json
     middleware.ts
     .env
     .env.local
     .gitignore

• app/page.tsx : This is home page of Next.js app. It can be accessed by 'localhost:3000/'
• app/counter/page.tsx : This define a component section in app. It can be accessed by 'localhost:3000/counter'

Top Level Folders

The top level folders in Next.js are used to organize application's root level code and static assets.

• /app: This is the root folder for App Router. The page.tsx file inside this folder will be rendered at the root of the application.
• /pages: This is the root folder for Page Router. The index.tsx file inside this folder will be rendered at the root of the application.
• /public: This folder contains static assets such as images, fonts, and stylesheets.
• /src: This is an optional folder that contains the source code of the application. It is used to organize the codebase and separate the application's logic from the presentation layer.

Top Level Files

The top level files in Next.js are stored at root folder and are used to configure the application's environment and define the application's routes.

• next.config.js: This file is used to configure the application's environment.
• package.json: This file is used to define the application's dependencies and scripts.
• instrumentation.ts: This file is used to instrument the application's code for performance monitoring.
• middleware.ts : This file is used to define the application's middleware.
• .env : This file is used to define the application's environment variables.
• .env.local : This file is used to define the application's environment variables for local development.
• .gitignore : This file is used to define the files and directories that should be ignored by git.
• tsconfig.json : This file is used to define the TypeScript configuration for the application.

Routing Files

The routing files in Next.js are stored inside the /app/ or /pages/ directory and are used to define the application's routes.

• layout.tsx: This file is used to define the application's layout such a navigation bar, header etc.
• loading.tsx: This file is used to define the application's loading screen.
• error.tsx: This file is used to handle the application's errors such as 404, 500 etc.
• index.tsx: This file is used to define the application's home page.
• route.ts: This file is used to define API routes.
• not-found.tsx : This file is used render a 404 page when any route is not found.