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 référence :

• Arbre : Une convention pour visualiser une structure hiérarchique. Par exemple, une arborescence 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 dans un sous-arbre qui n'ont pas d'enfants, comme le dernier segment dans 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 vient après 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 fonctionne conjointement 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 et vous 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 sont utilisés pour 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 sont utilisés pour 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 :

Bon à savoir : Les extensions de fichiers .js, .jsx ou .tsx peuvent ê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.js
• template.js
• error.js (limite d'erreur React)
• loading.js (limite de suspense React)
• not-found.js (limite d'erreur React)
• page.js ou layout.js imbriqué

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 des dossiers du répertoire app.

C'est parce que bien que les dossiers définissent les routes, seuls les contenus retournés par page.js ou route.js sont accessibles publiquement.

Apprenez-en 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 : Vous permettent d'afficher simultanément deux pages ou plus dans la même vue qui peuvent être naviguées indépendamment. Vous pouvez les utiliser pour des vues divisées ayant leur propre sous-navigation. Par ex. Tableaux de bord.
• Routes d'interception : Vous permettent d'intercepter une route et de l'afficher dans le contexte d'une autre route. Vous pouvez les utiliser lorsque le maintien du contexte pour la page actuelle est important. Par ex. Voir toutes les tâches lors de l'édition d'une tâche 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 :