generateStaticParams

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

// Retourne une liste de `params` pour peupler 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 async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await 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é.

Vous devez retourner un tableau vide depuis generateStaticParams ou utiliser export const dynamic = 'force-static' pour revalider (ISR) les chemins au moment de l'exécution.

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 peuplés par le generateStaticParams parent, qui peuvent être utilisés pour générer les params dans un segment enfant.

Retours

generateStaticParams doit retourner un tableau d'objets où chaque objet représente les segments dynamiques peuplés 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 async function Page({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  // ...
}

Plusieurs segments dynamiques

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 async function Page({
  params,
}: {
  params: Promise<{ category: string; product: string }>
}) {
  const { category, product } = await 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 async function Page({
  params,
}: {
  params: Promise<{ slug: string[] }>
}) {
  const { slug } = await params
  // ...
}

Exemples

Rendu statique

Tous les chemins au moment de la construction

Pour rendre statiquement tous les chemins au moment de la construction, fournissez la liste complète des chemins à generateStaticParams :

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

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

Sous-ensemble de chemins au moment de la construction

Pour rendre statiquement un sous-ensemble de chemins au moment de la construction, et le reste lors de leur première visite au moment de l'exécution, retournez une liste partielle de chemins :

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

  // Rend les 10 premiers posts au moment de la construction
  return posts.slice(0, 10).map((post) => ({
    slug: post.slug,
  }))
}

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

// Tous les posts 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,
  }))
}

Tous les chemins au moment de l'exécution

Pour rendre statiquement tous les chemins lors de leur première visite, retournez un tableau vide (aucun chemin ne sera rendu au moment de la construction) ou utilisez export const dynamic = 'force-static' :

app/blog/[slug]/page.js

export async function generateStaticParams() {
  return []
}

Bon à savoir : Vous devez toujours retourner un tableau depuis generateStaticParams, même s'il est vide. Sinon, la route sera rendue dynamiquement.

app/changelog/[slug]/page.js

export const dynamic = 'force-static'

Désactiver le rendu pour les chemins non spécifiés

Pour empêcher le rendu statique des chemins non spécifiés au moment de l'exécution, ajoutez l'option export const dynamicParams = false dans un segment de route. Lorsque cette option est utilisée, seuls les chemins fournis par generateStaticParams seront servis, et les routes non spécifiées retourneront une 404 ou correspondront (dans le cas des routes catch-all).

Plusieurs segments dynamiques dans une route

Vous pouvez générer des params pour les 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 à la fois [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érez plusieurs segments dynamiques depuis le segment de route enfant.

// Génère 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: Promise<{ category: string; product: string }>
}) {
  // ...
}

Générer les params de haut en bas

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

// Génère 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: Promise<{ category: string }>
}) {
  // ...
}

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 generateStaticParams parent pour générer dynamiquement ses propres segments.

// Génère 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: Promise<{ category: string; product: string }>
}) {
  // ...
}

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 Server Components. React cache peut être utilisé si fetch n'est pas disponible.

Historique des versions

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

On this page