Comment créer des routes dynamiques dans Next.js

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 article.

Vous pouvez créer des itinéraires dynamiques dans Next.js en définissant deux fonctions : getStaticProps et getStaticPaths.

UTILISEZ LA VIDÉO DU JOUR

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.

comment déplacer des applications du téléphone vers la carte sd

const Post = ({ postData }) => { 
  return <div>{/* content */}</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().

import { getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{/* content */}</div>; 
}; 
  
export const getStaticProps = async ({ params }) => { 
    const post = await getSinglePost(params.slug); 
    return { 
      props: { ...post }, 
    }; 
  };

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 :

export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
};

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 :

import { getAllPosts, getSinglePost } from "../../utils/posts"; 
  
const Post = ({ content }) => { 
  return <div>{content}</div>; 
}; 
  
export const getStaticPaths = async () => { 
  const paths = getAllPosts().map(({ slug }) => ({ params: { slug } })); 
  return { 
    paths, 
    fallback: false, 
  }; 
}; 
  
export const getStaticProps = async ({ params }) => { 
  const post = await getSinglePost(params.slug); 
  
  return { 
    props: { ...post }, 
  }; 
}; 
  
export default Post;

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/articles.

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 :

import { useRouter } from 'next/router' 
  
const Post = () => { 
  const router = useRouter() 
  const { slug } = router.query 
  return <p>Post: {slug}</p> 
} 
  
export default Post

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.