Routage côté client dans Next.js —
Next.js dispose d'un système de routage basé sur des fichiers dans lequel chaque page devient automatiquement une route basée sur son nom de fichier. Chaque page est un composant React exporté par défaut à partir du répertoire des pages qui peut être utilisé pour définir les modèles de routage les plus courants. Cet article vous guidera à travers presque tout ce que vous devez savoir sur le routage dans Next.js et vous orientera vers des sujets et des concepts connexes.
Les hyperliens sont l'un des fleurons du Web depuis sa création . Selon MDN, les hyperliens sont ce qui fait du Web, un Web. Bien qu'il soit utilisé à des fins telles que la création de liens entre des documents, son utilisation principale est de référencer différentes pages Web identifiables par une adresse Web unique ou une URL.
Le routage est un aspect important de chaque application Web autant que les hyperliens sont vers le Web. C'est un mécanisme par lequel les demandes sont acheminées vers le code qui les gère. Concernant le routage, les pages Next.js sont référencées et identifiables par un chemin URL unique. Si le Web se compose de pages Web de navigation interconnectées par des hyperliensalors chaque application Next.js se compose de pages pouvant être routées (gestionnaires de route ou routes) interconnectées par un routeur.
Next.js a une prise en charge intégrée du routage qui peut être difficile à décompresser, en particulier lorsque l'on considère le rendu et la récupération de données. Comme condition préalable à la compréhension du routage côté client dans Next.js, il est nécessaire d'avoir une vue d'ensemble des concepts tels que le routage, le rendu et la récupération de données dans Next.js.
Cet article sera utile aux développeurs React qui connaissent bien avec Next.js et souhaitez apprendre comment il gère le routage. Vous devez avoir une connaissance pratique de React et Next.js pour tirer le meilleur parti de l'article, qui concerne uniquement le routage côté client et les concepts associés dans Next.js.
Routage et rendu
Routage et rendu sont complémentaires et joueront un rôle énorme tout au long de cet article. J'aime la façon dont Gaurav les explique :
Le routage est le processus par lequel l'utilisateur navigue vers différentes pages d'un site Web.
Le rendu est le processus de mise en place de ces pages. sur l'interface utilisateur. Chaque fois que vous demandez un itinéraire vers une page particulière, vous effectuez également le rendu de cette page, mais tous les rendus ne sont pas le résultat d'un itinéraire.
Prenez cinq minutes pour y réfléchir.
Ce dont vous avez besoin pour comprendre à propos du rendu dans Next.js est que chaque page est pré-rendue à l'avance avec le code JavaScript minimal nécessaire pour qu'elle devienne pleinement interactive grâce à un processus appelé hydratation. La façon dont Next.js fait cela dépend fortement de la forme de pré-rendu : Static Generation ou Server-side renderqui sont tous deux fortement couplés au technique de récupération de données utilisée, et séparée par lorsque le code HTML d'une page est généré.
En fonction de vos besoins en matière de récupération de données, vous pourriez vous retrouver à utiliser des fonctions de récupération de données intégrées telles que getStaticProps
getStaticPaths
ou, getServerSideProps
des outils d'extraction de données côté client tels que SWR, react-query ou des approches d'extraction de données traditionnelles telles que fetch-on-renderfetch-then-renderrender-as-you-fetch (avec Suspense).
Pré-rendu (avant rendu — à l'interface utilisateur ) est complémentaire au routage et fortement couplé à la récupération de données – un sujet à part entière dans Next.js. Ainsi, bien que ces concepts soient soit complémentaires, soit étroitement liés, cet article se concentrera uniquement sur la simple navigation entre les pages (routage), avec des références aux concepts connexes si nécessaire.
Cela étant réglé, commençons par l'essentiel. : Next.js a un routeur basé sur le système de fichiers construit sur le concept de pages.
Pages
Les pages de Next.js sont des composants React automatiquement disponibles comme itinéraires. Ils sont exportés en tant qu'exportations par défaut à partir du répertoire des pages avec les extensions de fichiers prises en charge telles que .js
.jsx
.ts
ou .tsx
.
Une application Next.js typique aura une structure de dossiers avec des répertoires de niveau supérieur tels que pagespublic et styles.
next-app
node_modules
pages
│ ├── index.js // chemin : base-url (/)
│ ├── books.jsx // chemin : /books
│ └── livre.ts // chemin : /livre
publique
styles
.gitignore
package.json
└── README.md
Chaque page est un composant React :
// pages/books.js — `base-url/book`
exporter la fonction par défaut Book() {
revenir
}
Remarque : Gardez à l'esprit que les pages peuvent également être appelées « gestionnaires d'itinéraires ».
Pages personnalisées
Ce sont des pages spéciales qui résident dans les pages répertoire mais ne participent pas au routage. Ils sont précédés du symbole de soulignement, comme dans _app.js
et _document.js
.
_app.js
Il s'agit d'un composant personnalisé qui réside dans le dossier pages. Next.js utilise ce composant pour initialiser les pages._document.js
Comme_app.js
_document.js
est un composant personnalisé que Next.js utilise pour augmenter vos applicationset
tags. Cela est nécessaire car les pages Next.js ignorent la définition du balisage du document environnant.
next-app
node_modules
pages
│ ├── _app.js // ⚠️ Page personnalisée (indisponible en tant qu'itinéraire)
│ ├── _document.jsx // ⚠️ Page personnalisée (indisponible en tant qu'itinéraire)
│ └── index.ts // chemin : base-url (/)
publique
styles
.gitignore
package.json
└── README.md
Lien entre les pages
Next.js expose un composant Link
de l'API next/link
qui peut être utilisé pour effectuer une route côté client transitions entre les pages.
// Importer le composant
importer le lien de "suivant/lien" ;
// Cela pourrait être un composant de page
exporter la fonction par défaut TopNav() {
revenir (
)
}
// Cela pourrait être un composant non-page
exporter la fonction par défaut Publications() {
revenir (
{/* ... */}
)
}
Le composant Link
peut être utilisé à l'intérieur de n'importe quel composant, page ou non. Lorsqu'il est utilisé dans sa forme la plus basique comme dans l'exemple ci-dessus, le composant Link
se traduit par un hyperlien avec un attribut href
. (Plus d'informations sur Link
dans la section suivante/lien ci-dessous.)
Routage
Le système de routage basé sur fichier Next.js peut être utilisé pour définir les modèles de route les plus courants. Pour s'adapter à ces modèles, chaque route est séparée en fonction de sa définition.
Index Routes
Par défaut, dans votre application Next.js, la route initiale/par défaut est pages/index.js
qui sert automatiquement de point de départ de votre application sous le nom /
. Avec une URL de base de localhost:3000
cette route d'indexation est accessible au niveau de l'URL de base de l'application dans le navigateur.
Les routes d'indexation agissent automatiquement comme route par défaut pour chaque répertoire et peuvent éliminer nommer les licenciements. La structure de répertoire ci-dessous expose deux chemins de route : /
et /home
.
next-app
pages
├── index.js // chemin : base-url (/)
└── home.js // chemin : /home
L'élimination est plus apparente avec routes imbriquées.
Routes imbriquées
Une route comme pages/book
est d'un niveau de profondeur. Aller plus loin consiste à créer des routes imbriquées, ce qui nécessite une structure de dossiers imbriqués. Avec une URL de base de https://www.smashingmagazine.com
vous pouvez accéder à l'itinéraire https://www.smashingmagazine.com/printed-books/printed-books
en créant une structure de dossiers similaire à celle ci-dessous :
next-app
pages
index.js // top index route
└── livres-imprimés // itinéraire imbriqué
└──printed-books.js // chemin : /printed-books/printed-books
Ou éliminez la redondance des chemins avec les routes d'index et accédez à la route des livres imprimés sur https://www.smashingmagazine.com /livres-imprimés
.
next-app
pages
index.js // top index route
└── livres-imprimés // parcours imbriqué
└── index.js // chemin : /printed-books
Les routes dynamiques jouent également un rôle important dans l'élimination des redondances.
Les routes dynamiques
À partir de l'exemple précédent, nous utilisons la route d'index pour accéder à tous les livres imprimés. Pour accéder à des livres individuels, il faut soit créer des itinéraires différents pour chaque livre comme :
// ️ Ne faites pas ça.
application suivante
pages
├── index.js // top index route
└── livres-imprimés // itinéraire imbriqué
├── index.js // chemin : /printed-books
├── typesript-in-50-lessons.js // chemin: /printed-books/typesript-in-50-lessons
├── checklist-cards.js // chemin : /printed-books/checklist-cards
├──ethical-design-handbook.js // chemin: /printed-books/ethical-design-handbook
├── inclus-components.js // chemin : /printed-books/inclusive-components
└── click.js // chemin : /printed-books/click
qui est hautement redondant, non évolutif et peut être corrigé avec des routes dynamiques telles que :
// Faites ceci à la place.
application suivante
pages
index.js // top index route
└── livres imprimés
├── index.js // chemin : /printed-books
└── [book-id].js // chemin : /printed-books/:book-id
La syntaxe des crochets — [book-id]
— est le segment dynamiqueet ne se limite pas aux fichiers seuls . Il peut également être utilisé avec des dossiers comme l'exemple ci-dessous, rendant l'auteur disponible sur la route /printed-books/:book-id/author
.
next-app
pages
├── index.js // top index route
└── livres imprimés
├── index.js // chemin : /printed-books
[book-id]
author.js // chemin : /printed-books/:book-id/author
Le ou les segments dynamiques d'un itinéraire sont exposés en tant que paramètre de requête accessible dans n'importe quel composant de connexion impliqué dans la route avec l'objet query
du hook useRouter()
— (Plus d'informations à ce sujet dans la section API next/router).
//printed-books/:book- identifiant
importer { useRouter } depuis 'next/router' ;
exporter la fonction par défaut Book() {
const { requête } = useRouter();
revenir (
book-id {query['book-id']}
);
}
// /livres-imprimés/:book-id/author
importer { useRouter } depuis 'next/router' ;
exporter la fonction par défaut Auteur() {
const { requête } = useRouter();
revenir (
Récupérer l'auteur avec l'identifiant du livre {query['book-id']}
);
}
Extension des segments de route dynamique avec Catch All Routes
Vous avez vu la syntaxe de support de segment de route dynamique comme dans l'exemple précédent avec [book-id].js
. La beauté de cette syntaxe est qu'elle va encore plus loin avec Catch-All Routes. Vous pouvez déduire ce que cela fait du nom : il capture toutes les routes.
Lorsque nous avons examiné l'exemple dynamique, nous avons appris comment cela aide à éliminer la redondance de création de fichiers pour qu'une seule route puisse accéder à plusieurs livres avec leur ID. Mais nous aurions pu faire autre chose.
Plus précisément, nous avions le chemin /printed-books/:book-id
avec une structure de répertoire :
next-app
pages
index.js
└── livres imprimés
index.js
└── [book-id].js
Si nous avons mis à jour le chemin pour avoir plus de segments comme des catégories, nous pourrions nous retrouver avec quelque chose comme : /printed-books/design/:book-id
/printed-books/engineering/:book-id
ou mieux encore /printed-books/:category/:book-id
.
Ajoutons l'année de parution : /printed-books/:category/:release-year/:book-id
. Est-ce que vous pouvez voir un motif? La structure du répertoire devient :
next-app
pages
index.js
└── livres imprimés
[category]
[release-year]
└── [book-id].js
Nous avons substitué l'utilisation de fichiers nommés aux routes dynamiques, mais nous nous sommes retrouvés d'une manière ou d'une autre avec une autre forme de redondance. Eh bien, il existe un correctif : Catch All Routes qui élimine le besoin de routes profondément imbriquées :
next-app
pages
index.js
└── livres imprimés
└── [...slug].js
Il utilise la même syntaxe entre crochets, sauf qu'il est préfixé par trois points. Pensez aux points comme la syntaxe de propagation JavaScript. Vous vous demandez peut-être : si j'utilise les routes fourre-tout, comment puis-je accéder à la catégorie ([category]
) et à l'année de sortie ([release-year]
). Deux manières :
- Dans le cas de l'exemple des livres imprimés, l'objectif final est le livre, et chaque information de livre aura ses métadonnées associées, ou
- Les segments « slug » sont renvoyés sous forme de tableau de paramètre(s) de requête.
import { useRouter } depuis 'next/router' ;
exporter la fonction par défaut Book() {
const { requête } = useRouter();
// Il y a un bref moment où `slug` n'est pas défini
// nous utilisons donc l'opérateur de chaînage facultatif (?.) et de fusion nulle (??)
// pour vérifier si slug n'est pas défini, puis revenir à un tableau vide
const [category, releaseYear, bookId] = requête?.slug ?? [];
revenir (
Id du livre
{bookId}
Catégorie
{category}
Année de sortie
{releaseYear}
);
}
Voici d'autres exemples pour la route /printed-books/[…slug]
:
Path | Query parameter |
---|---|
/printed-books/click.js | { « slug » : [“click”] } |
/printed-books/2020/click.js | { "slug": [“2020”, “click”] } |
/printed-books/design/2020/click.js | { "slug ” : [“design”, “2020”, “click”] } |
Comme c'est le cas avec la route fourre-tout, la route /printed-books
générera une erreur 404 à moins que vous ne fournissiez une route d'index de secours.
next-app
pages
index.js
└── livres imprimés
├── index.js // chemin : /printed-books
└── [...slug].js
C'est parce que la route fourre-tout est « stricte ». Soit il correspond à un slug, soit il renvoie une erreur. Si vous souhaitez éviter de créer des routes d'index à côté des routes fourre-tout, vous pouvez utiliser les routes fourre-tout facultatives à la place.
Extension des segments de route dynamiques avec des routes fourre-tout facultatives
Le la syntaxe est la même que pour les routes fourre-tout, mais avec des doubles crochets à la place.
next-app
pages
index.js
└── livres imprimés
└── [[...slug]].js
Dans ce cas, la route fourre-tout (slug) est facultative et si elle n'est pas disponible, les solutions de secours vers le chemin /printed-books
rendues avec [[…slug]].js
gestionnaire de route, sans aucun paramètre de requête.
Utilisez le catch-all avec les routes d'index, ou les routes catch-all facultatives seules. Évitez d'utiliser des routes fourre-tout et des routes fourre-tout facultatives à côté.
Priorité des routes
La capacité de définir les modèles de routage les plus courants peut être un « cygne noir ». La possibilité de conflits de routes est une menace imminente, surtout lorsque vous commencez à créer des routes dynamiques.
Lorsque cela a du sens, Next.js vous informe des conflits de routes sous la forme d'erreurs. Dans le cas contraire, il applique la priorité aux routes en fonction de leur spécificité.
Par exemple, c'est une erreur d'avoir plusieurs routes dynamiques au même niveau.
// ❌ Ceci est une erreur.
// Échec du rechargement des routes dynamiques : Erreur : Vous ne pouvez pas utiliser des noms de slug différents pour // le même chemin dynamique ('book-id' !== 'id').
application suivante
pages
index.js
└── livres imprimés
[book-id].js
└── [id].js
Si vous regardez attentivement les routes définies ci-dessous, vous remarquerez le potentiel de conflits.
// Structure de répertoire aplatie pour plus de simplicité.
application suivante
pages
├── index.js // index route (également une route prédéfinie)
└── livres imprimés
index.js
├── tags.js // itinéraire prédéfini
├── [book-id].js // gère la route dynamique
└── [...slug].js // handles catch all route
Par exemple, essayez de répondre à ceci : quelle route gère le chemin /printed-books/inclusive-components
?
/printed- books/[book-id].js
ou/printed-books/[…slug].js
.
La réponse réside dans la « spécificité » des gestionnaires de routes. Les routes prédéfinies viennent en premier, suivies des routes dynamiques, puis des routes fourre-tout. Vous pouvez considérer le modèle de demande/gestion de route comme un pseudo-code avec les étapes suivantes :
- Existe-t-il un gestionnaire de route prédéfini qui peut gérer la route ?
true
— gérer la demande de route.false
— aller à 2.
- Existe-t-il un gestionnaire de route dynamique qui peut gérer la route ?
true
— gérer la demande de route.false
— aller à 3.
- Existe-t-il un gestionnaire de route fourre-tout qui peut gérer la route ?
true
— gérer la demande de route.false
— lancer une page 404 introuvable.
Par conséquent, /printed-books/[book-id].js
gagne .
Voici d'autres exemples :
Route | Route handler | Type of route |
---|---|---|
/printed-books | /printed-books | Index route |
/ printed-books/tags | /printed-books/tags.js | Itinéraire prédéfini |
/printed-books/inclusive-components | /printed-books/[book-id]. js | Route dynamique |
/printed-books/design/inclusive-components | /printed-books/[...slug].js | Route fourre-tout |
Le suivant API /link
L'API next/link
expose le composant Link
comme moyen déclaratif d'effectuer des transitions de route côté client.
import Link from 'next /relier'
fonction TopNav() {
revenir (
)
}
Le composant Link
se résoudra en un lien hypertexte HTML normal. Autrement dit, Smashing Magazine
se résoudra en Smashing Magazine
.
Le prop href
est le seul prop requis pour le composant Link
. Voir docs pour une liste complète des accessoires disponibles sur le composant Link
.
Il existe d'autres mécanismes du composant Link
à connaître.[19659169]Routes avec segments dynamiques
Avant Next.js 9.5.3, Lien
ant aux routes dynamiques signifiait que vous deviez fournir à la fois le href
et as
prop à Link
comme dans :
import Link from 'next/link' ;
const impriméLivres = [
{ name: 'Ethical Design', id: 'ethical-design' },
{ name: 'Design Systems', id: 'design-systems' },
];
fonction d'exportation par défaut PrintedBooks() {
return Livresimprimés.map((Livreimprimé) => (
{printedBook.name}
));
}
Bien que cela ait permis à Next.js d'interpoler le href pour les paramètres dynamiques, c'était fastidieux, sujet aux erreurs et quelque peu impératif, et a maintenant été corrigé pour la majorité des cas d'utilisation avec la sortie de Next.js 10.
Ce correctif est également rétrocompatible. Si vous avez utilisé à la fois as
et href
rien ne se casse. Pour adopter la nouvelle syntaxe, supprimez la prop href
et sa valeur, et renommez la prop as
en href
comme dans l'exemple ci-dessous :
import Link de « suivant/lien » ;
const impriméLivres = [
{ name: 'Ethical Design', id: 'ethical-design' },
{ name: 'Design Systems', id: 'design-systems' },
];
fonction d'exportation par défaut PrintedBooks() {
return Livresimprimés.map((Livreimprimé) => (
{printedBook.name}
));
}
Use-cases For The passHref
Prop
Regardez attentivement l'extrait ci-dessous :
import Link from « suivant/lien » ;
const impriméLivres = [
{ name: 'Ethical Design', id: 'ethical-design' },
{ name: 'Design Systems', id: 'design-systems' },
];
// Disons que cela a une sorte de style de base attaché
fonction CustomLink ({ href, nom }) {
retourner {nom} ;
}
fonction d'exportation par défaut de PrintedBooks() {
return Livresimprimés.map((Livreimprimé) => (
));
}
Les propriétés passHref
forcent le composant Link
à transmettre la propriété href
au composant enfant CustomLink
. Ceci est obligatoire si le composant Link
s'enroule sur un composant qui renvoie une balise de lien hypertexte . Votre cas d'utilisation peut être dû au fait que vous utilisez une bibliothèque telle que styled-components, ou si vous devez transmettre plusieurs enfants au composant
Link
car il n'attend qu'un seul enfant.
Voir docs pour en savoir plus.
Objets URL
La prop href
du composant Link
peut également être un objet URL avec propriétés telles que query
qui est automatiquement formatée dans une chaîne d'URL.
Avec l'objet printedBooks
l'exemple ci-dessous sera lié à :
/printed-books/ ethical-design?name=Ethical+Design
et/printed-books/design-systems?name=Design+Systems
.
import Link from 'next/link';
const impriméLivres = [
{ name: 'Ethical Design', id: 'ethical-design' },
{ name: 'Design Systems', id: 'design-systems' },
];
fonction d'exportation par défaut PrintedBooks() {
return Livresimprimés.map((Livreimprimé) => (
{printedBook.name}
));
}
Si vous incluez un segment dynamique dans le chemin
vous devez également l'inclure en tant que propriété dans l'objet de requête pour vous assurer que la requête est interpolée dans le chemin
:
importer le lien depuis 'suivant/lien' ;
const impriméLivres = [
{ name: 'Ethical Design', id: 'ethical-design' },
{ name: 'Design Systems', id: 'design-systems' },
];
// Dans ce cas, le segment dynamique `[book-id]` dans le chemin
// mappe directement sur le paramètre de requête `book-id`
fonction d'exportation par défaut de PrintedBooks() {
return Livresimprimés.map((Livreimprimé) => (
{printedBook.name}
));
}
L'exemple ci-dessus a des chemins :
/printed-books/ethical-design
et/printed-books/design-systems
.
Si vous inspectez l'attribut href
dans VSCode, vous trouverez le type LinkProps
avec la propriété href
un type Url
qui est soit un string
ou UrlObject
comme mentionné précédemment.
L'inspection de l'UrlObject
mène en outre à l'interface avec les propriétés :
Vous pouvez en savoir plus sur ces propriétés dans la Documentation du module URL Node.js.
Un cas d'utilisation du hachage consiste à créer un lien vers des sections spécifiques d'une page.
Importer le lien depuis « suivant/lien » ;
const impriméLivres = [{ name: 'Ethical Design', id: 'ethical-design' }];
fonction d'exportation par défaut de PrintedBooks() {
return Livresimprimés.map((Livreimprimé) => (
{printedBook.name}
));
}
Le lien hypertexte se résoudra à /printed-books/ethical-design#faq
.
En savoir plus dans la doc.
L'API next/router
Si le next/link
est déclaratif, alors le next/router
est impératif. Il expose un hook useRouter
qui permet d'accéder à l'objet router
à l'intérieur de n'importe quel composant de fonction. Vous pouvez utiliser ce hook pour effectuer manuellement le routage, plus particulièrement dans certains scénarios où le next/link
n'est pas suffisant, ou lorsque vous devez « accrocher » au routage.
import { useRouter } from « suivant/routeur » ;
exporter la fonction par défaut Home() {
const router = useRouter();
fonction handleClick(e) {
e.preventDefault();
router.push(href);
}
revenir (
)
}
useRouter
est un hook React et ne peut pas être utilisé avec des classes. Besoin de l'objet router
dans les composants de classe ? Utilisez withRouter
.
import { withRouter } depuis 'next/router' ;
function Accueil({routeur}) {
fonction poignéeClic(e) {
e.preventDefault();
router.push(href);
}
revenir (
)
}
export default withRouter(Home);
L'objet router
Le hook useRouter
et le composant d'ordre supérieur withRouter
renvoient un objet routeur avec des propriétés telles que pathname
query
asPath
et basePath
qui vous donnent des informations sur l'état de l'URL de la page actuelle, locale
locales
et defaultLocale
qui donnent des informations sur les paramètres régionaux par défaut actifs, pris en charge ou actuels.
L'objet routeur a également des méthodes telles que push
pour naviguer vers une nouvelle URL en ajoutant une nouvelle entrée d'URL dans la pile d'historique, replace
similaire à push mais remplace l'URL actuelle au lieu d'ajouter une nouvelle entrée d'URL dans la pile d'historique.
En savoir plus sur l'objet routeur .
Configuration de route personnalisée avec suivant .config.js
Il s'agit d'un module Node.js standard qui peut être utilisé pour configurer certains comportements de Next.js.
module.exports = {
// options de configuration
}
N'oubliez pas de redémarrer votre serveur chaque fois que vous mettez à jour
next.config.js
. En savoir plus.
Base Path
Il a été mentionné que la route initiale/par défaut dans Next.js est pages/index.js
avec le chemin /
. Ceci est configurable et vous pouvez faire de votre route par défaut un sous-chemin du domaine.
module.exports = {
// ancien chemin par défaut : /
// nouveau chemin par défaut : /dashboard
chemin de base : '/tableau de bord',
};
Ces modifications prendront automatiquement effet dans votre application avec tous les chemins /
acheminés vers /dashboard
.
Cette fonctionnalité ne peut être utilisée qu'avec Next.js 9.5 et versions ultérieures. En savoir plus.
Trailing Slash
Par défaut, une barre oblique ne sera pas disponible à la fin de chaque URL. Cependant, vous pouvez changer cela avec :
module.exports = {
trailingSlash : vrai
};
# trailingSlash : false
/livres-imprimés/design-ethique#faq
# trailingSlash : vrai
/printed-books/ethical-design/#faq
Les fonctionnalités base path et trailing slash ne peuvent être utilisées qu'avec Next.js 9.5 et versions ultérieures.
Conclusion
Le routage est l'une des parties les plus importantes de votre application Next.js, et il se reflète dans le routeur basé sur le système de fichiers basé sur le concept de pages. Les pages peuvent être utilisées pour définir les schémas d'itinéraire les plus courants. Les concepts de routage et de rendu sont étroitement liés. Prenez les leçons de cet article avec vous lorsque vous créez votre propre application Next.js ou travaillez sur une base de code Next.js. Et consultez les ressources ci-dessous pour en savoir plus.
Related Resources
Source link