Organisation de projet et colocalisation de fichiers

En dehors des conventions de dossiers et fichiers pour le routage, Next.js est non-opinionated concernant la manière d'organiser et de colocaliser les fichiers de votre projet.

Cette page présente le comportement par défaut et les fonctionnalités que vous pouvez utiliser pour organiser votre projet.

• Colocalisation sécurisée par défaut
• Fonctionnalités d'organisation de projet
• Stratégies d'organisation de projet

Colocalisation sécurisée par défaut

Dans le répertoire app, la hiérarchie des dossiers imbriqués définit la structure des routes.

Chaque dossier représente un segment de route qui est mappé à un segment correspondant dans un chemin URL.

Cependant, même si la structure des routes est définie par des dossiers, une route n'est pas accessible publiquement tant qu'un fichier page.js ou route.js n'est pas ajouté à un segment de route.

Et, même lorsqu'une route est rendue accessible publiquement, seul le contenu retourné par page.js ou route.js est envoyé au client.

Cela signifie que les fichiers de projet peuvent être colocalisés en toute sécurité dans les segments de route du répertoire app sans devenir accidentellement accessibles.

Bon à savoir :

• Ceci est différent du répertoire pages, où tout fichier dans pages est considéré comme une route.
• Bien que vous puissiez colocaliser vos fichiers de projet dans app, vous n'êtes pas obligé. Si vous préférez, vous pouvez les conserver en dehors du répertoire app.

Fonctionnalités d'organisation de projet

Next.js fournit plusieurs fonctionnalités pour vous aider à organiser votre projet.

Dossiers privés

Les dossiers privés peuvent être créés en préfixant un dossier avec un tiret bas : _nomDuDossier

Cela indique que le dossier est un détail d'implémentation privé et ne doit pas être pris en compte par le système de routage, excluant ainsi le dossier et tous ses sous-dossiers du routage.

Comme les fichiers du répertoire app peuvent être colocalisés en toute sécurité par défaut, les dossiers privés ne sont pas nécessaires pour la colocalisation. Cependant, ils peuvent être utiles pour :

• Séparer la logique d'interface utilisateur de la logique de routage.
• Organiser de manière cohérente les fichiers internes dans un projet et l'écosystème Next.js.
• Trier et regrouper les fichiers dans les éditeurs de code.
• Éviter les conflits de noms potentiels avec les futures conventions de fichiers Next.js.

Bon à savoir

• Bien que ce ne soit pas une convention du framework, vous pouvez également envisager de marquer les fichiers en dehors des dossiers privés comme "privés" en utilisant le même modèle de tiret bas.
• Vous pouvez créer des segments URL commençant par un tiret bas en préfixant le nom du dossier avec %5F (la forme encodée URL d'un tiret bas) : %5FnomDuDossier.
• Si vous n'utilisez pas de dossiers privés, il serait utile de connaître les conventions de fichiers spéciales de Next.js pour éviter des conflits de noms inattendus.

Groupes de routes

Les groupes de routes peuvent être créés en entourant un dossier de parenthèses : (nomDuDossier)

Cela indique que le dossier est à des fins d'organisation et ne doit pas être inclus dans le chemin URL de la route.

Les groupes de routes sont utiles pour :

• Organiser les routes en groupes par exemple par section du site, intention ou équipe.
• Permettre des mises en page imbriquées au même niveau de segment de route :
  • Créer plusieurs mises en page imbriquées dans le même segment, y compris plusieurs mises en page racine
  • Ajouter une mise en page à un sous-ensemble de routes dans un segment commun

Répertoire src

Next.js prend en charge le stockage du code d'application (y compris app) dans un répertoire src optionnel. Cela sépare le code d'application des fichiers de configuration du projet qui se trouvent principalement à la racine d'un projet.

Alias de chemins de modules

Next.js prend en charge les Alias de chemins de modules qui facilitent la lecture et la maintenance des imports dans les fichiers de projet profondément imbriqués.

// avant
import { Button } from '../../../components/button'

// après
import { Button } from '@/components/button'

Stratégies d'organisation de projet

Il n'y a pas de manière "correcte" ou "incorrecte" d'organiser vos propres fichiers et dossiers dans un projet Next.js.

La section suivante présente un aperçu très général des stratégies courantes. Le principal conseil est de choisir une stratégie qui fonctionne pour vous et votre équipe et d'être cohérent à travers le projet.

Bon à savoir : Dans nos exemples ci-dessous, nous utilisons les dossiers components et lib comme placeholders génériques, leur nommage n'a pas de signification particulière dans le framework et vos projets peuvent utiliser d'autres dossiers comme ui, utils, hooks, styles, etc.

Stocker les fichiers de projet en dehors de app

Cette stratégie stocke tout le code d'application dans des dossiers partagés à la racine de votre projet et conserve le répertoire app uniquement pour les besoins de routage.

Stocker les fichiers de projet dans des dossiers de premier niveau à l'intérieur de app

Cette stratégie stocke tout le code d'application dans des dossiers partagés à la racine du répertoire app.

Diviser les fichiers de projet par fonctionnalité ou route

Cette stratégie stocke le code d'application partagé globalement à la racine du répertoire app et divise le code d'application plus spécifique dans les segments de route qui l'utilisent.