Groupes de routes

Dans le répertoire app, les dossiers imbriqués sont normalement mappés à des chemins d'URL. Cependant, vous pouvez marquer un dossier comme Groupe de routes pour empêcher son inclusion dans le chemin d'URL de la route.

Cela vous permet d'organiser vos segments de route et fichiers de projet en groupes logiques sans affecter la structure du chemin d'URL.

Les groupes de routes sont utiles pour :

Convention

Un groupe de routes peut être créé en entourant le nom d'un dossier de parenthèses : (nomDuDossier)

Exemples

Organiser les routes sans affecter le chemin d'URL

Pour organiser les routes sans affecter l'URL, créez un groupe pour garder ensemble les routes liées. Les dossiers entre parenthèses seront omis de l'URL (par exemple (marketing) ou (shop)).

Organisation des routes avec des groupes de routes

Même si les routes dans (marketing) et (shop) partagent la même hiérarchie d'URL, vous pouvez créer un layout différent pour chaque groupe en ajoutant un fichier layout.js dans leurs dossiers respectifs.

Groupes de routes avec plusieurs layouts

Inclure des segments spécifiques dans un layout

Pour inclure certaines routes dans un layout, créez un nouveau groupe de routes (par exemple (shop)) et déplacez les routes partageant le même layout dans ce groupe (par exemple account et cart). Les routes en dehors du groupe ne partageront pas le layout (par exemple checkout).

Groupes de routes avec layouts optionnels

Créer plusieurs layouts racine

Pour créer plusieurs layouts racine, supprimez le fichier layout.js de niveau supérieur et ajoutez un fichier layout.js dans chaque groupe de routes. Ceci est utile pour partitionner une application en sections ayant une interface ou expérience complètement différente. Les balises <html> et <body> doivent être ajoutées à chaque layout racine.

Groupes de routes avec plusieurs layouts racine

Dans l'exemple ci-dessus, (marketing) et (shop) ont chacun leur propre layout racine.


Bon à savoir :

  • La nomenclature des groupes de routes n'a pas de signification particulière autre que l'organisation. Elle n'affecte pas le chemin d'URL.
  • Les routes incluant un groupe de routes ne doivent pas résoudre vers le même chemin d'URL que d'autres routes. Par exemple, comme les groupes de routes n'affectent pas la structure d'URL, (marketing)/about/page.js et (shop)/about/page.js résoudraient tous deux vers /about et causeraient une erreur.
  • Si vous utilisez plusieurs layouts racine sans fichier layout.js de niveau supérieur, votre fichier page.js d'accueil doit être défini dans l'un des groupes de routes, par exemple : app/(marketing)/page.js.
  • Naviguer entre plusieurs layouts racine provoquera un rechargement complet de page (par opposition à une navigation côté client). Par exemple, naviguer de /cart qui utilise app/(shop)/layout.js vers /blog qui utilise app/(marketing)/layout.js provoquera un rechargement complet. Ceci s'applique uniquement aux multiples layouts racine.