Routes dynamiques

Lorsque vous ne connaissez pas à l'avance les noms exacts des segments 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 au moment de la construction.

Convention

Un segment dynamique peut être créé en entourant le nom d'un dossier de crochets : [nomDossier]. Par exemple, [id] ou [slug].

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

Exemple

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 function Page({ params }: { params: { slug: string } }) {
  return <div>Mon article : {params.slug}</div>
}

export default function Page({ params }) {
  return <div>Mon article : {params.slug}</div>
}

Consultez la page generateStaticParams() pour apprendre à générer les paramètres du segment.

Bon à savoir : Les segments dynamiques sont équivalents aux routes dynamiques dans le répertoire pages.

Génération de paramètres statiques

La fonction generateStaticParams peut être utilisée en combinaison avec des segments de route dynamique pour générer statiquement des routes au moment de la construction plutôt qu'à la demande.

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

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

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

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

Le principal avantage de la fonction generateStaticParams est sa récupération intelligente des données. Si le contenu est récupéré dans la fonction generateStaticParams à l'aide d'une requête fetch, les requêtes sont automatiquement mémorisées. Cela signifie qu'une requête fetch avec les mêmes arguments à travers plusieurs generateStaticParams, Layouts et Pages ne sera faite qu'une seule fois, ce qui réduit les temps de construction.

Utilisez le guide de migration si vous migrez depuis le répertoire pages.

Consultez la documentation de la fonction serveur generateStaticParams pour plus d'informations et des cas d'utilisation avancés.

Segments attrape-tout

Les segments dynamiques peuvent être étendus pour attraper les segments suivants en ajoutant des points de suspension à l'intérieur des 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 les optionnels, la route sans le 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 de votre segment de route configuré.

export default function Page({ params }: { params: { slug: string } }) {
  return <h1>Ma page</h1>
}

export default function Page({ params }) {
  return <h1>Ma page</h1>
}

Bon à savoir : Cela pourrait être fait automatiquement par le plugin TypeScript à l'avenir.