Segments de route dynamiques

Lorsque vous ne connaissez pas à l'avance les noms exacts des segments de route et que vous souhaitez créer des routes à partir de données dynamiques, vous pouvez utiliser des segments dynamiques qui sont remplis au moment de la requête ou prérendus lors de la construction.

Convention

Un segment dynamique peut être créé en entourant le nom d'un dossier de crochets : [nomDossier]. Par exemple, un blog pourrait inclure la route suivante app/blog/[slug]/page.js où [slug] est le segment dynamique pour les articles de blog.

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <div>Mon article : {slug}</div>
}

Les segments dynamiques sont passés comme prop params aux fonctions layout, page, route, et generateMetadata.

Segments attrape-tout

Les segments dynamiques peuvent être étendus pour attraper tous les segments suivants en ajoutant des points de suspension entre les crochets [...nomDossier].

Par exemple, app/shop/[...slug]/page.js correspondra à /shop/clothes, mais aussi à /shop/clothes/tops, /shop/clothes/tops/t-shirts, etc.

Segments attrape-tout optionnels

Les segments attrape-tout peuvent être rendus optionnels en incluant le paramètre dans des doubles crochets : [[...nomDossier]].

Par exemple, app/shop/[[...slug]]/page.js correspondra également à /shop, en plus de /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.

La différence entre les segments attrape-tout et attrape-tout optionnels est qu'avec l'optionnel, la route sans paramètre est également prise en compte (/shop dans l'exemple ci-dessus).

TypeScript

Lorsque vous utilisez TypeScript, vous pouvez ajouter des types pour params en fonction du segment de route configuré.

Comportement

• Étant donné que la prop params est une promesse, vous devez utiliser async/await ou la fonction use de React pour accéder aux valeurs.
  • Dans la version 14 et antérieures, params était une prop synchrone. Pour faciliter la rétrocompatibilité, vous pouvez toujours y accéder de manière synchrone dans Next.js 15, mais ce comportement sera déprécié à l'avenir.

Exemples

Avec generateStaticParams

La fonction generateStaticParams peut être utilisée pour générer statiquement les routes lors de la construction plutôt qu'à la demande lors de la requête.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

  return posts.map((post) => ({
    slug: post.slug,
  }))
}

Lorsque vous utilisez fetch à l'intérieur de la fonction generateStaticParams, les requêtes sont automatiquement dédupliquées. Cela évite les appels réseau multiples pour les mêmes données dans les Layouts, Pages et autres fonctions generateStaticParams, accélérant ainsi le temps de construction.