generateStaticParams

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

app/blog/[slug]/page.js

// Retourne une liste de `params` pour remplir le segment dynamique [slug]
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

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

// Plusieurs versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Bon à savoir

Vous pouvez utiliser l'option de configuration de segment dynamicParams pour contrôler ce qui se passe lorsqu'un segment dynamique non généré par generateStaticParams est visité.

Pendant next dev, generateStaticParams sera appelé lorsque vous naviguez vers une route.

Pendant next build, generateStaticParams s'exécute avant la génération des Layouts ou Pages correspondants.

Pendant la revalidation (ISR), generateStaticParams ne sera pas rappelé.

generateStaticParams remplace la fonction getStaticPaths dans le Routeur Pages.

Paramètres

options.params (optionnel)

Si plusieurs segments dynamiques dans une route utilisent generateStaticParams, la fonction enfant generateStaticParams est exécutée une fois pour chaque ensemble de params généré par le parent.

L'objet params contient les params remplis par le generateStaticParams parent, qui peuvent être utilisés pour générer les params dans un segment enfant.

Valeur retournée

generateStaticParams doit retourner un tableau d'objets où chaque objet représente les segments dynamiques remplis d'une seule route.

Chaque propriété de l'objet est un segment dynamique à remplir pour la route.
Le nom de la propriété est le nom du segment, et la valeur de la propriété est ce avec quoi le segment doit être rempli.

Exemple de route	Type de retour de `generateStaticParams`
`/product/[id]`	`{ id: string }[]`
`/products/[category]/[product]`	`{ category: string, product: string }[]`
`/products/[...slug]`	`{ slug: string[] }[]`

Segment dynamique unique

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

// Trois versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }: { params: { id: string } }) {
  const { id } = params
  // ...
}

export function generateStaticParams() {
  return [{ id: '1' }, { id: '2' }, { id: '3' }]
}

// Trois versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }) {
  const { id } = params
  // ...
}

Segments dynamiques multiples

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// Trois versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  const { category, product } = params
  // ...
}

export function generateStaticParams() {
  return [
    { category: 'a', product: '1' },
    { category: 'b', product: '2' },
    { category: 'c', product: '3' },
  ]
}

// Trois versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({ params }) {
  const { category, product } = params
  // ...
}

Segment dynamique catch-all

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}

// Trois versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }: { params: { slug: string[] } }) {
  const { slug } = params
  // ...
}

export function generateStaticParams() {
  return [{ slug: ['a', '1'] }, { slug: ['b', '2'] }, { slug: ['c', '3'] }]
}

// Trois versions de cette page seront générées statiquement
// en utilisant les `params` retournés par `generateStaticParams`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Exemples

Segments dynamiques multiples dans une route

Vous pouvez générer des params pour des segments dynamiques situés au-dessus du layout ou de la page actuelle, mais pas en dessous. Par exemple, pour la route app/products/[category]/[product] :

app/products/[category]/[product]/page.js peut générer des params pour les deux segments [category] et [product].
app/products/[category]/layout.js peut seulement générer des params pour [category].

Il existe deux approches pour générer des params pour une route avec plusieurs segments dynamiques :

Générer les params de bas en haut

Générer plusieurs segments dynamiques à partir du segment de route enfant.

// Générer des segments pour [category] et [product]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

// Générer des segments pour [category] et [product]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
    product: product.id,
  }))
}

export default function Page({ params }) {
  // ...
}

Générer les params de haut en bas

Générer d'abord les segments parents et utiliser le résultat pour générer les segments enfants.

// Générer des segments pour [category]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
  }))
}

export default function Layout({ params }: { params: { category: string } }) {
  // ...
}

// Générer des segments pour [category]
export async function generateStaticParams() {
  const products = await fetch('https://.../products').then((res) => res.json())

  return products.map((product) => ({
    category: product.category.slug,
  }))
}

export default function Layout({ params }) {
  // ...
}

La fonction generateStaticParams d'un segment de route enfant est exécutée une fois pour chaque segment généré par un parent generateStaticParams.

La fonction generateStaticParams enfant peut utiliser les params retournés par la fonction parent generateStaticParams pour générer dynamiquement ses propres segments.

// Générer des segments pour [product] en utilisant les `params` passés
// depuis la fonction `generateStaticParams` du segment parent
export async function generateStaticParams({
  params: { category },
}: {
  params: { category: string }
}) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())

  return products.map((product) => ({
    product: product.id,
  }))
}

export default function Page({
  params,
}: {
  params: { category: string; product: string }
}) {
  // ...
}

// Générer des segments pour [product] en utilisant les `params` passés
// depuis la fonction `generateStaticParams` du segment parent
export async function generateStaticParams({ params: { category } }) {
  const products = await fetch(
    `https://.../products?category=${category}`
  ).then((res) => res.json())

  return products.map((product) => ({
    product: product.id,
  }))
}

export default function Page({ params }) {
  // ...
}

Bon à savoir : Les requêtes fetch sont automatiquement mémoïsées pour les mêmes données à travers toutes les fonctions préfixées par generate, les Layouts, Pages et Composants Serveur. React cache peut être utilisé si fetch n'est pas disponible.

Générer seulement un sous-ensemble de params

Vous pouvez générer un sous-ensemble de params pour une route en retournant un tableau d'objets avec uniquement les segments dynamiques que vous souhaitez générer. Ensuite, en utilisant l'option de configuration de segment dynamicParams, vous pouvez contrôler ce qui se passe lorsqu'un segment dynamique non généré par generateStaticParams est visité.

app/blog/[slug]/page.js

// Tous les articles sauf les 10 premiers retourneront une 404
export const dynamicParams = false

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

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

Historique des versions

Version	Changements
`v13.0.0`	Introduction de `generateStaticParams`.

On this page