Principes fondamentaux du routage
Le squelette de toute application est son système de routage. Cette page vous présentera les concepts fondamentaux du routage web et comment gérer le routage dans Next.js.
Terminologie
Vous rencontrerez ces termes fréquemment dans la documentation. Voici un rapide glossaire :
- Arbre : Convention pour visualiser une structure hiérarchique. Par exemple, un arbre de composants avec des composants parents et enfants, une structure de dossiers, etc.
- Sous-arbre : Partie d'un arbre, commençant à une nouvelle racine (premier nœud) et se terminant aux feuilles (dernier nœud).
- Racine : Le premier nœud d'un arbre ou sous-arbre, comme une mise en page racine.
- Feuille : Nœuds d'un sous-arbre sans enfants, comme le dernier segment d'un chemin d'URL.
- Segment d'URL : Partie du chemin d'URL délimitée par des barres obliques.
- Chemin d'URL : Partie de l'URL qui suit le domaine (composée de segments).
Le routeur app
Dans la version 13, Next.js a introduit un nouveau routeur App basé sur les composants serveur React, qui prend en charge les mises en page partagées, le routage imbriqué, les états de chargement, la gestion des erreurs et plus encore.
Le routeur App fonctionne dans un nouveau répertoire nommé app. Le répertoire app coexiste avec le répertoire pages pour permettre une adoption progressive. Cela vous permet d'opter pour le nouveau comportement sur certaines routes de votre application tout en conservant d'autres routes dans le répertoire pages pour le comportement précédent. Si votre application utilise le répertoire pages, consultez également la documentation du routeur Pages.
Bon à savoir : Le routeur App a la priorité sur le routeur Pages. Les routes entre les répertoires ne doivent pas résoudre vers le même chemin d'URL et provoqueront une erreur lors de la compilation pour éviter un conflit.
Par défaut, les composants dans app sont des composants serveur React. Il s'agit d'une optimisation de performance qui permet de les adopter facilement, et vous pouvez également utiliser des composants client.
Recommandation : Consultez la page Serveur si vous débutez avec les composants serveur.
Rôles des dossiers et fichiers
Next.js utilise un routeur basé sur le système de fichiers où :
- Les dossiers servent à définir les routes. Une route est un chemin unique de dossiers imbriqués, suivant la hiérarchie du système de fichiers depuis le dossier racine jusqu'à un dossier feuille final qui inclut un fichier
page.js. Voir Définition des routes. - Les fichiers servent à créer l'interface utilisateur affichée pour un segment de route. Voir fichiers spéciaux.
Segments de route
Chaque dossier dans une route représente un segment de route. Chaque segment de route est mappé à un segment correspondant dans un chemin d'URL.
Routes imbriquées
Pour créer une route imbriquée, vous pouvez imbriquer des dossiers les uns dans les autres. Par exemple, vous pouvez ajouter une nouvelle route /dashboard/settings en imbriquant deux nouveaux dossiers dans le répertoire app.
La route /dashboard/settings est composée de trois segments :
/(Segment racine)dashboard(Segment)settings(Segment feuille)
Conventions de fichiers
Next.js fournit un ensemble de fichiers spéciaux pour créer des interfaces utilisateur avec des comportements spécifiques dans les routes imbriquées :
layout | Interface partagée pour un segment et ses enfants |
page | Interface unique d'une route et rend les routes accessibles publiquement |
loading | Interface de chargement pour un segment et ses enfants |
not-found | Interface "non trouvé" pour un segment et ses enfants |
error | Interface d'erreur pour un segment et ses enfants |
global-error | Interface d'erreur globale |
route | Point de terminaison API côté serveur |
template | Mise en page spécialisée re-rendue |
default | Interface de secours pour les routes parallèles |
Bon à savoir : Les extensions de fichier
.js,.jsxou.tsxpeuvent être utilisées pour les fichiers spéciaux.
Hiérarchie des composants
Les composants React définis dans les fichiers spéciaux d'un segment de route sont rendus dans une hiérarchie spécifique :
layout.jstemplate.jserror.js(limite d'erreur React)loading.js(limite de suspense React)not-found.js(limite d'erreur React)page.jsoulayout.jsimbriqué
Dans une route imbriquée, les composants d'un segment seront imbriqués à l'intérieur des composants de son segment parent.
Colocalisation
En plus des fichiers spéciaux, vous avez la possibilité de colocaliser vos propres fichiers (par exemple, composants, styles, tests, etc.) dans les dossiers du répertoire app.
En effet, bien que les dossiers définissent les routes, seuls les contenus renvoyés par page.js ou route.js sont accessibles publiquement.
En savoir plus sur l'organisation de projet et la colocalisation.
Modèles de routage avancés
Le routeur App fournit également un ensemble de conventions pour vous aider à implémenter des modèles de routage plus avancés. Ceux-ci incluent :
- Routes parallèles : Permettent d'afficher simultanément deux pages ou plus dans la même vue, pouvant être naviguées indépendamment. Utiles pour les vues divisées avec leur propre sous-navigation, par exemple les tableaux de bord.
- Routes d'interception : Permettent d'intercepter une route et de l'afficher dans le contexte d'une autre route. Utiles lorsque le contexte de la page actuelle est important, par exemple voir toutes les tâches tout en en éditant une ou agrandir une photo dans un flux.
Ces modèles vous permettent de créer des interfaces utilisateur plus riches et complexes, démocratisant des fonctionnalités historiquement complexes à implémenter pour les petites équipes et les développeurs individuels.
Prochaines étapes
Maintenant que vous comprenez les principes fondamentaux du routage dans Next.js, suivez les liens ci-dessous pour créer vos premières routes :