How Do I Organize a Sustainable Next.js Project?
VienDinhCom opened this issue · comments
Challenge
Bad Next.js project organization can lead to problems, such as poor performance, unscalable, unmaintainable, hard to navigate between files, etc. So, in this article, I will share with you how I organize a sustainable Next.js project to improve the development experience.
Solution
I have built a Shopify theme from scratch. I love the clear and maintainable project structure from it. It influences me on how to organize my projects. And just like a Shopify theme, I have several folders like these:
- Pages: Each page has a layout. Each page can have many sections as needed. For example, a product detail page can have three sections: A product information section, a related products section, and a recommended products section.
- Layouts: A layout is a reusable component. We can use a layout on many pages. A layout can have a header, a footer, and many child sections.
- Sections: To me, a section is very important. A section file has its UI component and its data fetching function. So we can reuse a section on many pages without rewriting data fetching code. I also created an npm package called @maxvien/next to handle typesafe modular data fetching in Next.js.
- Snippets: A snippet is a reusable atomic component. We can use a snippet in pages, layouts, and sections.
- Assets: The assets folder contains static resources like CSS files, images, fonts, etc.
- Utilities: The utilities folder includes reusable functions, hooks, services, types, etc.
Now, you have an overview of how I organize a Next.js project. In the next section, I am going to show you in detail.
Project Folders
Look at the folder structure below, you can see that I have src in the root level of the project. So I can separate the source code from the other parts of the project.
- src
- assets
- layouts
- pages
- sections
- snippets
- utilities
Wrapping the other folders into one src folder makes the project less chaotic. You can look at a real folder structure here: https://github.com/maxvien/next-shopify-storefront/tree/v3/src
Absolute Imports
Using relative imports like this import mod from '../../../mod.ts'
makes it hard to identify the locations of the imported files. So, using absolute imports is a better choice. And these are what absolute imports look like.
import '@site/assets/style.css';
import { StoreLayout } from '@site/layouts/StoreLayout';
import { ProductListSection, fetchProductListSection } from '@site/sections/ProductListSection';
import { Button } from '@site/snippets/Button';
import { DataProps, useVariantSelector } from '@site/utilities/deps';
To enable absolute imports, you must create Next.js projects with TypeScript.
npx create-next-app@latest --typescript
Next, in the tsconfig.json
file, I will add these lines in the compiler options
.
{
"compiler options": {
...
"baseUrl": ".",
"paths": {
"@site/*": ["./src/*"]
}
},
...
}
You can also take a look at the full file here: https://github.com/maxvien/next-shopify-storefront/blob/v3/tsconfig.json
Conclusion
Good Next.js project organization should be scalable, maintainable, easy to navigate between files, etc. I hope my little solution can improve your development experience. Thank you for reading!