Next JS Project Structure

Next.js organizes its file structure in a way that emphasizes conventions for building scalable and maintainable React applications. Here’s a breakdown of the core components in a typical Next.js project:

1. Root Directory

This is where configuration files and the main directories live.

package.json: Defines the project’s dependencies and scripts.
next.config.js: Config file for custom Next.js configurations (optional).
.env.local / .env.production: Environment variable files for local or production configurations.
node_modules/: Directory where all project dependencies are installed.

2. `pages/` Directory

This is where all the routes are defined. Next.js automatically maps each file inside this folder to a route.

index.js: This is the root page (mapped to /).
about.js: A file in the pages/ directory like about.js would be mapped to /about.
[slug].js: Dynamic routes use square brackets, such as [slug].js, allowing for URLs like /post/my-first-post.
_app.js: This file overrides the default App component, used to wrap all page components. Ideal for global layouts, global state providers, or including styles across the app.
_document.js: Customizes the HTML document (e.g., changing the <html> and <body> tags). This file is commonly used to inject CSS libraries like styled-components.
api/: This folder inside pages/ is used to define API routes. Any JavaScript file inside the api directory will be treated as an API route instead of a page.

3. `public/` Directory

Contains static assets like images, fonts, or any file you want to serve directly.
Files in this directory can be accessed directly via /filename (e.g., an image logo.png in this directory will be available at http://localhost:3000/logo.png).

4. `components/` Directory

It holds reusable React components, which can be imported into various pages.
This directory isn't required by Next.js, but it’s a convention followed to keep your UI elements modular and organized.

5. `styles/` Directory

This is where you can place your CSS files. You can define global styles, CSS modules, or even use SCSS or any other preprocessor.
globals.css: A file that imports global CSS, typically used inside pages/_app.js.

6. `lib/` or `utils/` Directory

Contains helper functions, custom hooks, or any utility logic you want to use across different parts of the application.
Not required but commonly used to store logic that should not be tied to a specific component or page.

7. `hooks/` Directory

(Optional) If you are using custom React hooks, this folder organizes all your custom hooks that can be reused across components.

8. `middleware/` Directory (Optional)

As of Next.js 12 and beyond, this can be used for defining custom middleware that runs before rendering a page, useful for tasks like authentication or redirects.

9. `store/` Directory (Optional)

If you're using a state management library like Redux or Zustand, this is where you could define your global store configuration.

10. `.next/` Directory

This is a generated directory that holds the build files after running a build (next build). It should be ignored in version control.

Example File Structure:

my-next-app/
│
├── node_modules/
├── pages/
│   ├── api/
│   │   └── hello.js
│   ├── _app.js
│   ├── _document.js
│   ├── index.js
│   └── about.js
├── components/
│   └── Navbar.js
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── public/
│   └── logo.png
├── lib/
│   └── fetcher.js
├── package.json
├── next.config.js
└── .env.local

This structure helps you create well-organized and scalable Next.js applications by separating concerns like pages, components, and API routes.

Next Previous

Getting Started

Next JS introduction