Back to all articles
•
Post in French
•Daryl NgakoComment j'organise mes fichiers en Next.js
Découvre les meilleures pratiques pour organiser tes fichiers dans Next.js
Next.jsReacttutoriel
Découvre les meilleures pratiques pour organiser tes fichiers dans Next.js
Lorsque tu travailles sur un projet Next.js, tu peux vite te retrouver avec une pile de fichiers et de dossiers, et ça peut rapidement devenir chaotique.
Dans cet article, je te montre ma méthode pour structurer correctement tes projets — conventions de nommage, séparation claire des responsabilités (composants, hooks, services, etc.) — pour que même si un nouveau développeur arrive, il comprenne ton code en quelques minutes.
Lorsque tu crées un projet Next.js, tu obtiens cette structure par défaut.
Le dossier app est le cœur de ton application. Il gère exclusivement le routage : chaque sous-dossier devient une route, avec colocalisation des fichiers liés :
On évite d'y mettre de la logique métier globale pour garder la clarté.
Avec Next.js, il est possible de placer d'autres fichiers comme ProductList.tsx, qui ne concernent pas directement le routage, à l'intérieur du dossier app.
Tout ce qui est lié uniquement à une page ou un layout, tu le mets dans app.
Un exemple concret :
Tu as un dossier app/jobs/ qui contient page.tsx. Tu vas y ajouter JobsList.tsx ainsi qu'une action dans apply-job.action.ts pour postuler à une offre d'emploi !
JobList.tsx est un composant permettant d'afficher la liste des offres d'emploi. Il est directement lié à cette page, c'est pourquoi il est placé juste à côté.
Tu vas organiser le dossier comme ceci :
Imagine que tu as d'autres composants comme JobsHeader.tsx, JobsPagination.tsx, JobsAlert.tsx qui sont aussi directement liés à la page d'offres. Cela ferait déjà beaucoup de fichiers au même niveau que la page.
Pour rendre l'ensemble plus propre, tu vas créer un dossier privé à l'intérieur du dossier app/jobs/ et tu vas y mettre tous les composants liés à cette page.
Il faut savoir qu'en Next.js, les dossiers qui commencent par un _ (underscore) sont ignorés par le routage.
Dans le cas où tu as une page pour gérer les produits côté admin avec de nombreux composants et actions, tu peux créer des dossiers _components et _actions :
En pratique, tu auras par exemple :
Pour les composants :
Et pour les actions (Server Actions ou mutations TanStack) :
Ainsi, ta page est complètement isolée des différents composants et actions tout en étant dans le même dossier.
En Next.js, il existe une autre façon de structurer tes routes en utilisant des parenthèses dans le nom des dossiers.
Prenons l'exemple de la connexion et de l'inscription d'un utilisateur.
Plutôt que de faire ceci :
Fais plutôt comme ça :
Résultat au niveau de l'URL :
Le dossier src est optionnel mais recommandé, car il te permettra de regrouper tous les fichiers qui seront réutilisés à plusieurs endroits.
Voici les dossiers principaux que j'utilise et comment je les organise :
Ce dossier contient tous les fichiers relatifs aux bibliothèques tierces que j'utilise.
Le tout premier fichier que tu auras dans ce dossier est utils.ts, qui contient l'utilitaire cn (un alias combinant clsx et tailwind-merge).
On y retrouve également plusieurs autres fichiers :
Tu obtiens au final :
Il contient tous les providers utilisés dans l'application.
Tu obtiens ceci :
Il contient tous les hooks réutilisables de ton application.
Ce qui donne :
Dans ce dossier, tu vas placer :
Tous les composants shadcn/ui et autres bibliothèques (Magic UI, 21st.dev) dans le sous-dossier ui.
Les composants structurels comme le header, le footer ou d'autres éléments de mise en page dans le sous-dossier layout.
Tous tes SVG dans le sous-dossier svg.
Les composants réutilisés à plusieurs endroits de ton app dans le sous-dossier shared.
Sans oublier les sous-dossiers admin, users et site, qui contiennent les composants métier qui ne sont pas directement liés à une page spécifique. Ils servent souvent de briques de construction pour d'autres composants.
Par exemple : Prenons le cas d'un site e-commerce comme Amazon. On retrouve dans le header un panier d'achat et une barre de recherche. Ces éléments sont des sous-composants du header ; je les placerais donc dans le sous-dossier site puisqu'ils concernent l'interface publique.
Pour la cloche de notification, je la placerais dans le sous-dossier users puisqu'elle est directement liée au profil de l'utilisateur.
Tu sais désormais comment organiser ce dossier.
Voici le rendu final :
Dans un projet Next.js ou React, on peut vite se retrouver submergé par le nombre de composants et de bibliothèques. Le vrai défi est de savoir les organiser correctement afin d'avoir un code propre, maintenable et facile à comprendre pour toi comme pour tes collaborateurs.
De nos jours, plus personne ne cherche un fichier manuellement dans l'explorateur : utiliser Shift + Ctrl + P pour retrouver un fichier instantanément est bien plus efficace. Ne te complique donc plus la vie inutilement.
Voici la structure globale pour un projet E-commerce :
J'espère que cet article t'aura plu !