Comment créer des itinéraires dynamiques dans Next.js

Ajoutez de la flexibilité à votre routage avec une inspection rapide des URL.

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 de contenu dynamique.

Pour un blog, vous pouvez utiliser un itinéraire dynamique pour créer des URL basées sur les titres des articles du blog. Cette approche est meilleure que 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'un itinéraire dynamique dans Next.js

Pour créer un itinéraire 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 l'itinéraire dynamique. Ainsi, si une publication contenait le slug dynamic-routes-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.

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 manière dont vous souhaitez afficher 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 il suffit de les récupérer au moment de la construction. Modifiez donc 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.

Utiliser 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 toutes les publications qui doivent être rendues 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 d'itinéraires dynamiques imbriqués dans Next.js

Pour créer un itinéraire imbriqué dans Next.js, vous devez créer un nouveau dossier dans le dossier pages et y enregistrer l'itinéraire dynamique.

Par exemple, pour créer /pages/posts/dynamic-routes-nextjs, enregistrez [slug].js dans /pages/posts.

Accès aux paramètres d'URL à partir de routes dynamiques

Après avoir créé la route, vous pouvez récupérer le paramètre URL de la route dynamique à l'aide du hook useRouter() React.

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 itinéraires 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.