Skip to main content

Understanding the file structure

In this tutorial, we are going to explore the file structure in Next.js. Understanding the file structure of Next.js is crucial because it is the backbone of your application. It helps you to organize your files and directories in a way that makes your codebase manageable and scalable.

Initial File Structure​

When you create a new Next.js application, you will see an initial file structure that looks something like this:

/my-app
├── .next/
├── node_modules/
├── pages/
├── public/
├── styles/
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

Let's break down these files and directories one by one.

.next/​

The .next directory is automatically generated when you run your application in development mode using the next dev command. It contains the compiled version of your application and should not be modified directly. This directory is not pushed to your version control system as it will be regenerated in every build.

node_modules/​

The node_modules directory includes all the npm packages that your application depends on. These dependencies are defined in your package.json file. You won't need to make changes in this directory.

pages/​

The pages directory is one of the most important directories in a Next.js application. It is the heart of the Next.js routing system. Each file in this directory corresponds to a route in your application.

For example, a file named about.js in the pages directory would correspond to the /about route in your application. The index.js file corresponds to the root (/) route.

This directory can also include a special file named _app.js. This file allows you to override the default App component provided by Next.js. You can use this file to add global styles or shared components that should be available to all your pages.

public/​

The public directory is where you can put any static files that your application needs to serve. These could be images, fonts, or any other static assets. These files will be served from the root (/) path. For example, if you have an image named logo.png in the public directory, you can access it in your application via the /logo.png URL.

styles/​

The styles directory is where you can put your global CSS files. Next.js supports CSS Modules out of the box, which lets you write CSS that's scoped to individual components.

.gitignore​

The .gitignore file tells git which files it should not track or maintain a version history for. By default, Next.js includes the .next/ and node_modules/ directories in this file.

package.json​

The package.json file is a standard file in any Node.js application. It lists the packages your project depends on, specifies versions of a package that your project can use using semantic versioning rules, makes your build reproducible, and more.

README.md​

The README.md file is a markdown file that usually contains instructions on how to use and install your application.

yarn.lock​

The yarn.lock file, like the package-lock.json file when using npm, is automatically generated and should not be touched. It ensures that the exact same dependency tree is used across every environment.

This covers the basic file structure of a Next.js application. As you build your application, you may add more directories and files as needed, such as a components directory for your React components, a lib directory for your utility functions, or a tests directory for your tests. However, the core structure will remain the same, and understanding it will help you navigate and organize your Next.js projects more effectively.