Retour • 03/09/2024

Comment j'organise mes fichiers en NextJS ?

Écris par Melvyn Malherbe le 03/09/2024

Comment organiser des fichiers dans une application NextJS avec l'app directory afin d'avoir un code propre et maintenable pour des applications moyenne et grosse ?

Après avoir créé 6 SaaS et une plateforme de formation pendant 2 ans... j'ai trouvé la meilleure manière d'organiser mes fichiers.

Pour ça on va avoir 3 parties :

1. Comment organiser le dossier app
2. Comment organiser le dossier src
3. Comment bien nommer ces fichiers

Comment organiser le dossier app

Le dossier app avec NextJS app directory permet de gérer le routing, mais contrairement à pages, uniquement certains fichiers seront utilisés par NextJS :

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

Il est donc maintenant possible de mettre d'autres fichiers comme user-form.tsx dans le dossier app sans que celui-ci influence les routes.

C'est pour ça que la première règle est :

Tout ce qui est lié à uniquement une page ou un layout, je le mets dans app

Prenons un exemple concret :

On a un dossier app/users/new qui contient page.tsx et qui va contenir un formulaire dans new-user-form.tsx et une action dans new-user.action.ts !

Je vais organiser mes dossiers comme ceci :

Tu vois qu'ici, je mets au même endroit mon composant React et ma server action.

Comment gérer quand il y a plusieurs actions ou composants ?

Il faut savoir qu'en NextJS les dossiers qui commencent par _ (underscore) sont ignorés par le routing NextJS.

Dans le cas où on a un dashboard, avec de nombreux composants et de nombreuses server actions, je crée un dossier _component et _action pour les différents composants.

Concrètement si j'ai user-stats.tsx, user-invoices.tsx, user-product.tsx et user-informations.tsx avec les actions user-stats.action.ts, user-invoices.action.ts, user-product.action.ts et user-informations.action.ts je vais mettre ces fichiers dans le dossier _component et _action :

De cette manière, tu retrouves facilement ta page.tsx ou ton layout.tsx sans pour autant déplacer tes fichiers dans un dossier trop éloigné de la page.

Comment organiser le dossier src ?

Le dossier src va me permettre de mettre tous les fichiers qui vont être "réutilisés" à plusieurs endroits. Voici les dossiers principaux que j'ai dans mon dossier et ensemble on va voir comment je les organise :

Dossier lib

Celui va contenir tous les fichiers relatifs aux librairies que j'utilise.

Le premier si tu utilises Shadcn c'est util.ts qui va contenir l'utilitaire cn.

Mais il y a pas mal de fichiers que je mets dedans :

• prisma.ts avec Prisma
• inngest.ts avec Inngest
• safe-actions.ts quand j'utilise Next Safe Action
• safe-route.ts avec Next Zod Route
• env.ts avec T3 Env

On va se retrouver avec un dossier lib comme ceci :

Dossier components

Je vais mettre tous mes components Shadcn dans le sous-dossier components/ui.

Je vais aussi avoir un components/utils qui va contenir des components comme le ErrorBoundary.

Finalement je vais rajouter dans ce dossier tous les components qui ne sont pas liés directement à une feature.

Par exemple dans mon application j'ai un component layout.tsx pour gérer le layout de chaque page que je vais mettre ici.

Si tu as des svg je vais aussi créer components/svg pour mettre tous les SVG !

Ce qui donne :

Dossier features

Le dossier features est maintenant la meilleure manière d'organiser des fichiers que tu réutilises plutôt souvent.

Mais c'est quoi une feature ?

Une feature c'est un groupe de composants, hooks et server-actions qui ensemble créent une fonctionnalité réutilisable de ton application.

Prenons un exemple :

Dans ton application, tu as un bouton qui permet d'enregistrer du texte avec la voix de l'utilisateur.

On utilise open-ai pour récupérer le transcript de l'utilisateur.

On pourrait avoir les fichiers suivants :

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

Tout ceci, va pouvoir aller dans le dossier features en imaginant que ce voice-recorder peut être utilisé à plusieurs endroits dans notre application.

Autre exemple ?

Imagine-toi que comme Vercel tu as une sorte de feedback form en haut de ta page :

Exemple de Vercel

Tu vas pouvoir réutiliser ce feedback form dans ton application.

Dans ce cas, tu vas avoir les fichiers :

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

Qu'on va mettre dans le dossier features/feedback-form !

Ce qui donne pour nos deux exemples :

Dossier hooks

Bon ici c'est simple, tous les hooks réutilisables tu les mets dans ce dossier hooks exemple :

Conclusion

En résumé, l'arbre de décision pour organiser mes fichiers est le suivant :

Excalidraw

Je t'invite à le modifier en fonction de tes besoins.

Si on mélange toutes les règles ensemble, voici ce qu'un projet peut ressembler :

Si tu as aimé cet article, tu vas encore plus aimer mon cours complet sur NextJS que tu peux retrouver ici :