Les routes dynamiques sont des pages qui vous permettent d'utiliser des paramètres personnalisés dans une URL. Ils sont particulièrement utiles lors de la création de pages pour un contenu dynamique.
Pour un blog, vous pouvez utiliser une route dynamique pour créer des URL basées sur les titres des articles de blog. Cette approche est préférable à la création d'un composant de page pour chaque publication.
Vous pouvez créer des itinéraires dynamiques dans Next.js en définissant deux fonctions: getStaticProps et getStaticPaths.
Création d'une route dynamique dans Next.js
Pour créer une route dynamique dans Next.js, ajoutez des crochets à une page. Par exemple, [params].js, [slug].js ou [id].js.
Pour un blog, vous pouvez utiliser un slug pour la route dynamique. Donc, si un message avait le slug routes-dynamiques-nextjs, l'URL résultante serait https://example.com/dynamic-routes-nextjs.
Dans le dossier pages, créez un nouveau fichier appelé [slug].js et créez le composant Post qui prend les données de publication comme accessoire.
constante Message = ({ postData }) => {
retour <div>{/* contenu */}</div>;
};
Il existe différentes manières de transmettre les données de publication à la poste. La méthode que vous choisissez dépend de la façon dont vous souhaitez rendre la page. Pour récupérer les données pendant la construction, utilisez getStaticProps() et pour les récupérer sur demande, utilisez getServerSideProps().
Utilisation de getStaticProps pour récupérer les données de publication
Les articles de blog ne changent pas aussi souvent, et les récupérer au moment de la construction est suffisant. Donc, modifiez le composant Post pour inclure getStaticProps().
importer { getSinglePost } depuis "../../utils/messages" ;constante Message = ({ contenu }) => {
retour <div>{/* contenu */}</div>;
};
exporterconstante getStaticProps = asynchrone ({ paramètres }) => {
constante poste = attendre getSinglePost (params.slug);
retour {
accessoires: { ...poster },
};
};
La fonction getStaticProps génère les données de publication rendues sur la page. Il utilise le slug des chemins générés par la fonction getStaticPaths.
Utilisation de getStaticPaths pour récupérer des chemins
La fonction getStaticPaths() renvoie les chemins des pages qui doivent être pré-rendues. Modifiez le composant Post pour l'inclure :
exporterconstante getStaticPaths = asynchrone () => {
constante chemins = getAllPosts().map(({ slug }) => ({ paramètres: { limace } }));
retour {
chemins,
se retirer: FAUX,
};
};
Cette implémentation de getStaticPaths récupère tous les messages qui doivent être rendus et renvoie les slugs en tant que paramètres.
Au total, [slug].js ressemblera à ceci :
importer { getAllPosts, getSinglePost } depuis "../../utils/messages" ;constante Message = ({ contenu }) => {
retour <div>{contenu}</div>;
};exporterconstante getStaticPaths = asynchrone () => {
constante chemins = getAllPosts().map(({ slug }) => ({ paramètres: { limace } }));
retour {
chemins,
se retirer: FAUX,
};
};exporterconstante getStaticProps = asynchrone ({ paramètres }) => {
constante poste = attendre getSinglePost (params.slug);retour {
accessoires: { ...poster },
};
};
exporterdéfaut Poste;
Vous devez utiliser getStaticProps() et getStaticPaths() ensemble pour créer une route dynamique. La fonction getStaticPaths() doit générer les routes dynamiques, tandis que getStaticProps() récupère les données rendues à chaque route.
Création de routes dynamiques imbriquées dans Next.js
Pour créer une route imbriquée dans Next.js, vous devez créer un nouveau dossier dans le dossier pages et y enregistrer la route dynamique.
Par exemple, pour créer /pages/posts/dynamic-routes-nextjs, enregistrez [slug].js à l'intérieur /pages/posts.
Accéder aux paramètres d'URL à partir de routes dynamiques
Après avoir créé la route, vous pouvez récupérer le Paramètre d'URL à partir de la route dynamique à l'aide de useRouter() Crochet de réaction.
Pour les pages/[slug].js, récupérez le slug comme ceci :
importer { useRouter } depuis 'suivant/routeur'constante Poste = () => {
constante routeur = useRouter()
constante { slug } = routeur.query
retour <p>Message: {slug}</p>
}
exporterdéfaut Poste
Cela affichera le slug du message.
Routage dynamique avec getServerSideProps
En utilisant Next.js, vous pouvez récupérer des données au moment de la construction et créer des routes dynamiques. Vous pouvez utiliser ces connaissances pour pré-afficher des pages à partir d'une liste d'éléments.
Si vous souhaitez récupérer des données à chaque requête, utilisez getServerSideProps au lieu de getStaticProps. Notez que cette approche est plus lente; vous ne devez l'utiliser que lorsque vous consommez des données qui changent régulièrement.