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().

Voir aussi :  Authentification des utilisateurs dans NodeJS à l'aide de Passport et de MongoDB

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().

Voir aussi :  Comment créer un jeu d'aventure textuel en Python

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.

Comment utiliser les routes dynamiques dans Nextjs ?

Les itinéraires dynamiques peuvent être étendus pour attraper tous les chemins en ajoutant trois points ( ) à l'intérieur des crochets. Par exemple : pages/publication/[slug].js correspond à /post/a , mais aussi à /post/a/b , /post/a/b/c et ainsi de suite.

Comment créer une route imbriquée dans le prochain JS ?

Créez une nouvelle page nommée article. js dans le dossier pages. Les utilisateurs peuvent implémenter des routes imbriquées en imbriquant simplement des dossiers dans le dossier pages, assurez-vous simplement que le nom du fichier et du dossier sont les mêmes. Maintenant, si vous accédez à l'URL localhost:300/article/competitive-programming, vous verrez les résultats souhaités.

Le prochain JS est-il dynamique ?

Prochain. js prend en charge ES2020 `import()` dynamique pour JavaScript. Avec lui, vous pouvez importer dynamiquement des modules JavaScript et travailler avec eux. Ils fonctionnent également avec le rendu côté serveur (SSR).

Voir aussi :  Mécanismes de temporisation avec C et Linux

Cliquez pour évaluer cet article !
[Total: Moyenne : ]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.