Comment créer des routes dynamiques dans Next.js

Les parcours dynamiques sont des pages web 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 web pour du matériel dynamique.

Pour un site de blog, vous pouvez faire usage d’une route dynamique pour créer des URL basées sur les titres des articles du blog. Cette stratégie est bien meilleure que la production d’un composant de page web pour chaque article.

Vous pouvez créer des routes dynamiques dans Next.js en définissant 2 fonctions : getStaticProps ainsi que getStaticPaths.

Création d’une route dynamique dans Next.js

Pour créer un parcours dynamique dans Next.js, ajoutez des accolades à une page. Par exemple, .js, .js ou .js.

Pour un blog, vous pouvez utiliser un slug pour le parcours dynamique. Ainsi, si un message avait le slug dynamic- routes-nextjs l’URL résultante serait https://example.com/dynamic-routes-nextjs.

Dans le dossier des pages web, créez un nouveau fichier appelé .js ainsi que la partie Post qui prend les informations du message comme prop.

Il existe différentes façons de transmettre les données du message à la partie Post. La technique que vous choisissez dépend de la manière exacte dont vous souhaitez réaliser la page web. Pour récupérer les données pendant le temps de développement, utilisez getStaticProps() et aussi pour les récupérer sur demande, utilisez getServerSideProps().

Utilisation de getStaticProps pour récupérer les données postales.

Les billets de blog ne changent pas aussi souvent, aussi bien que les récupérer au moment de la construction est suffisant. Donc, modifiez la partie Post pour inclure getStaticProps().

Le travail getStaticProps produit les données de post faites sur la page. Il fait usage du slug des cours produit par la fonction getStaticPaths.

Utilisation de getStaticPaths pour récupérer les chemins d’accès.

La fonctionnalité getStaticPaths() renvoie les parcours des pages qui doivent être pré-rendues. Ajustez le composant Post pour l’inclure :

Cette exécution de getStaticPaths apporte tous les articles qui doivent être rendus et renvoie les slugs comme paramètres.

Au total,. js ressemblera à ceci :

Vous devez faire usage de getStaticProps() et getStaticPaths() l’un avec l’autre pour produire une route vibrante. La fonction getStaticPaths() devrait créer les chemins dynamiques, tandis que getStaticProps() récupère les données faites à chaque route.

Création de routes dynamiques imbriquées dans Next.js

Pour produire un parcours imbriqué dans Next.js, vous devez développer un nouveau dossier à l’intérieur du dossier des pages Web et enregistrer le parcours dynamique à l’intérieur de celui-ci.

Par exemple, pour développer/ pages/posts/dynamic-routes-nextjs, sauvegardez.js à l’intérieur de / pages/posts.

Accès aux paramètres d’URL à partir des routes dynamiques

Après avoir créé le chemin, vous pouvez récupérer le critère URL du chemin dynamique en faisant usage du hook React useRouter().

Pour les pages web/. js, obtenez le slug similaire à ceci :

Cela permettra d’afficher le slug de l’article.

Routage dynamique avec getServerSideProps

En utilisant Next.js, vous pouvez récupérer des informations au moment de la construction ainsi que produire des parcours dynamiques. Vous pouvez utiliser ces connaissances pour pré-rendre des pages à partir d’une liste d’éléments.

Si vous avez l’intention d’apporter des informations à chaque demande, utilisez getServerSideProps par opposition à getStaticProps. Notez que cette technique est plus lente ; vous ne devriez l’utiliser que lorsque vous mangez des informations changeant régulièrement.