As a React framework, Next.js offers a high degree of flexibility in organizing your projects, which can sometimes make it challenging to determine the 'best practices' or to know what approaches others are adopting.
It's important to note that there isn't a one-size-fits-all solution, as each project has its unique requirements. However, here are some ways to structure your projects.
The first decision is whether you want a src folder or not, honestly either way is fine, you don't need to spend too thinking about this, I like having the src folder just because it has been the common practice.
Here is my suggested structure:
Now let's go one by one.
App folder
Nest JS 13 allows us to group routes under the same folder by creating a folder using parentheses (). That way we can group our routes using names that make sense to our application.
If you want to make sure no route is created under a folder you can name that folder starting with an underscore character _.
Components folder
This is self-explanatory, here you will store your react components. Here you have multiple options, you could:
- Have all all .tsx/jsx components files directly under. This is good if you have a small app.
- Have components with their own folder and an index.tsx/jsx under it. This is good if your components have file dependencies like CSS modules, specific custom hooks, config files, etc.
- Another option is to divide your components folder into features and into components grouping related components together. This works well in a big app.
Config Folder
Here is very simple, just store any config file.
Context Folder
Store your react context files
DB Folder
store your database-related files
Hooks Folder
Store your custom react hooks.
Server actions
Next JS allows us to have functions that we can call from the client components that run on the server by using the 'use server' string on top of a function. A good to organize those functions is by creating a server-actions folder.
Vendor Folder
Here you would store code that calls 3rd parties services.
Types/Models folder
If you are using Typescript having a types folder is very useful for having your types easily accessible.
Constant files
Another useful folder to have to have all your constants in one place.
That's it from me,
Let me know what suggestions you have!
Top comments (1)
nice article I have a lot of random files that I dont see in your images is the only thing! for example .next folder .vscode folder