Back • 03/09/2024

How I organize my files in NextJS?

Written by Melvyn Malherbe on 03/09/2024

How to organize files in a NextJS application with the app directory to have clean and maintainable code for medium and large applications?

After creating 6 SaaS and a training platform over 2 years... I found the best way to organize my files.

For this, we will have 3 parts:

1. How to organize the app folder
2. How to organize the src folder
3. How to properly name these files

How to organize the app folder

The app folder with NextJS app directory allows managing routing, but unlike pages, only certain files will be used by NextJS:

• page.tsx
• layout.tsx
• route.ts
• error.tsx
• etc...

It is now possible to put other files like user-form.tsx in the app folder without it affecting the routes.

That's why the first rule is:

Everything related to only one page or layout, I put it in app

Let's take a concrete example:

We have a folder app/users/new that contains page.tsx and will contain a form in new-user-form.tsx and an action in new-user.action.ts!

I will organize my folders like this:

You see here, I put my React component and my server action in the same place.

How to handle when there are multiple actions or components?

You should know that in NextJS folders that start with _ (underscore) are ignored by NextJS routing.

In the case where we have a dashboard, with many components and many server actions, I create a _component and _action folder for the different components.

Specifically, if I have user-stats.tsx, user-invoices.tsx, user-product.tsx, and user-informations.tsx with actions user-stats.action.ts, user-invoices.action.ts, user-product.action.ts, and user-informations.action.ts, I will put these files in the _component and _action folder:

This way, you can easily find your page.tsx or layout.tsx without moving your files to a folder too far from the page.

How to organize the src folder?

The src folder will allow me to put all the files that will be "reused" in several places. Here are the main folders I have in my folder and together we will see how I organize them:

lib Folder

This will contain all the files related to the libraries I use.

The first if you use Shadcn is util.ts which will contain the cn utility.

But there are quite a few files that I put in it:

• prisma.ts with Prisma
• inngest.ts with Inngest
• safe-actions.ts when I use Next Safe Action
• safe-route.ts with Next Zod Route
• env.ts with T3 Env

We will end up with a lib folder like this:

components Folder

I will put all my Shadcn components in the components/ui subfolder.

I will also have a components/utils that will contain components like the ErrorBoundary.

Finally, I will add to this folder all the components that are not directly related to a feature.

For example, in my application, I have a layout.tsx component to manage the layout of each page that I will put here.

If you have svg I will also create components/svg to put all the SVG!

Which gives:

features Folder

The features folder is now the best way to organize files that you reuse quite often.

But what is a feature?

A feature is a group of components, hooks, and server-actions that together create a reusable functionality of your application.

Let's take an example:

In your application, you have a button that allows you to save text with the user's voice.

We use open-ai to get the user's transcript.

We could have the following files:

• voice-recorder-button.tsx
• voice-recorder-card.tsx
• voice-recorder.action.ts

All of this can go into the features folder imagining that this voice-recorder can be used in several places in our application.

Another example?

Imagine that like Vercel you have a kind of feedback form at the top of your page:

Exemple of Vercel

You will be able to reuse this feedback form in your application.

In this case, you will have the files:

• feedback-form.tsx
• feedback-form.action.ts

That we will put in the features/feedback-form folder!

Which gives for our two examples:

hooks Folder

Well here it's simple, all reusable hooks you put them in this hooks folder example:

Conclusion

In summary, the decision tree to organize my files is as follows:

Excalidraw

I invite you to modify it according to your needs.

If we mix all the rules together, here is what a project might look like: