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. J'utilise le suffixe `.action.ts` pour toutes les server actions. De la même manière, j'utilise `.schema.ts` quand je définis des schémas [Zod](https://zod.dev/). ### 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](https://ui.shadcn.com) 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](https://prisma.io/) - `inngest.ts` avec [Inngest](https://www.inngest.com/) - `safe-actions.ts` quand j'utilise [Next Safe Action](https://next-safe-action.dev/) - `safe-route.ts` avec [Next Zod Route](https://github.com/Melvynx/next-zod-route) - `env.ts` avec [T3 Env](https://env.t3.gg/docs/nextjs#create-your-schema) On va se retrouver avec un dossier `lib` comme ceci : ### Dossier `components` Je vais mettre tous mes components [Shadcn](https://ui.shadcn.com) 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 : 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 : 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 :

NextJS VS React : Lequel utiliser dans tes applications ?