10 Next.js Folder Structure Best Practices

In this article, we’ll be discussing some best practices for structuring Next.js projects. We’ll go over what folders and files you should include, as well as how you can organize your project to scale as your application grows.

Next.js is a React framework that makes it easy to create server-rendered React applications. One of the benefits of using Next.js is that it comes with a default folder structure that is easy to understand and scale.

1. Create a pages folder

The pages folder is where all of your page components live. By default, Next.js will look in this folder for any files that match the routes you defined. For example, if you have a file named `about.js` in your pages folder, Next.js will automatically render that file when someone visits `/about`.

This is a great feature because it means you don’t have to manually define every single route in your application. However, it’s important to note that the pages folder is the only folder Next.js looks in by default. This means that if you want to keep your components organized in a different way, you’ll need to tell Next.js where to look.

One common way to do this is to create a `components` folder for all of your non-page components. Then, you can use the `import` statement to import those components into your page components as needed.

2. Use the file system to create routes

By using the file system to create routes, you can take advantage of automatic code splitting and prefetching. This means that your application will only load the code that is needed for each page, and it will do so in a way that is optimized for performance.

Additionally, using the file system to create routes makes it easy to maintain your application’s structure as it grows. As your application adds more pages, you can simply add new files and folders to the file system, and Next.js will automatically generate the appropriate routes.

3. Export your components from each page

When you export your components, it makes each page more modular and easier to reuse. For example, if you have a component that you use on multiple pages, you can export it from each page and import it into the other pages where you need it. This way, you don’t have to duplicate code or worry about maintaining multiple copies of the same component.

It also makes it easier to unit test your components because you can isolate them and test them in isolation. If you don’t export your components, then you have to render the entire page in order to test a single component, which is much less efficient.

So, always remember to export your components from each page for better maintainability, reusability, and unit testing.

4. Organize your files by feature, not type

Organizing your files by feature allows you to keep all of the files related to a certain feature in one place. This makes it easy to find the files you need and makes it less likely that you’ll accidentally delete or modify a file that’s not related to the feature you’re working on.

It also makes it easier to reuse code. For example, if you have a component that’s used in multiple places, you can put it in a shared folder and import it into each page or component that needs it.

Finally, organizing your files by feature makes it easier to scale your application. As your application grows, you can add new features without having to restructure your entire file system.

5. Put shared code in a common directory

If you have code that’s used in multiple places, it’s a good idea to put that code in a common directory. That way, you can import the code from that directory instead of duplicating the code in each place it’s used.

This has a few benefits. First, it reduces the amount of code you have to write (and maintain). Second, it makes your code more DRY (Don’t Repeat Yourself). And third, it makes it easier to change the code in one place and have those changes propagate to all the places where the code is used.

6. Keep layout and global styles separate

When you’re working on a large project with multiple pages, it can be tempting to put all your styles in a single file. However, this quickly becomes unmanageable as the project grows. It’s much better to keep layout styles separate from global styles.

Layout styles are those that are specific to a particular page or template. For example, if you have a blog, you might have a different layout for the home page, the post page, and the archive page. Each of these would have its own stylesheet.

Global styles, on the other hand, are those that are shared across the entire site. These might include things like your typography, colors, and general style rules. By keeping these in a separate file, you can make sure they’re consistent across the site, and you can more easily make changes to them.

7. Place static assets in a dedicated directory

When you have static assets such as images, videos, or fonts, it’s important to keep them in a separate directory from your source code. This is because they’re not usually changed when the code changes, so there’s no need to keep them in the same place.

It also helps to keep the project structure clean and organized. When you have all of your static assets in one place, it’s easier to find them and manage them.

Finally, it makes deployments simpler. When you know that all of your static assets are in one place, you can easily upload them to a CDN or other static asset hosting service.

8. Don’t put everything in one big folder

If you have a lot of files in one folder, it can be difficult to find the file you’re looking for. This is especially true if you have a lot of different types of files (e.g. images, CSS, JavaScript, etc.) in the same folder.

It’s also important to keep in mind that, as your project grows, you’ll likely need to add more folders and files. Having everything in one big folder will make it even more difficult to find the files you need.

Instead, try to organize your files into smaller folders. For example, you could create a folder for each type of file (e.g. images, CSS, JavaScript, etc.), or you could create a folder for each page on your website.

Organizing your files into smaller folders will make it easier to find the files you need, and it will also make your project more organized and manageable as it grows.

9. Add an API directory for serverless functions

When you build a Next.js app, the pages directory is where all of your React components live. But what about when you need to make a data request? That’s where the API directory comes in.

The API directory is where you’ll put all of your serverless functions. Serverless functions are pieces of code that run on demand, and they’re perfect for making data requests.

Next.js makes it easy to create serverless functions, and they can be deployed to any number of providers, like AWS Lambda or Zeit Now.

Adding an API directory to your Next.js folder structure will help keep your code organized and make it easier to find the serverless functions you need.

10. Consider using TypeScript

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It offers features like type annotations, interfaces, classes, and modules, which can help you write code that is more maintainable and error-free.

If you’re starting a new project, you might want to consider using TypeScript from the beginning. However, if you’re adding it to an existing project, you’ll need to take some time to convert your existing code to TypeScript.