Folder structure for Next JS 13

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!