generateStaticParams

Die generateStaticParams-Funktion kann in Kombination mit dynamischen Routensegmenten verwendet werden, um Routen statisch zur Build-Zeit zu generieren, anstatt bei Bedarf zur Laufzeit.

app/blog/[slug]/page.js

// Gibt eine Liste von `params` zurück, um das [slug]-dynamische Segment zu füllen
export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

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

// Mehrere Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Wissenswert

Sie können die dynamicParams-Segmentkonfigurationsoption verwenden, um zu steuern, was passiert, wenn ein dynamisches Segment aufgerufen wird, das nicht mit generateStaticParams generiert wurde.

Während next dev wird generateStaticParams aufgerufen, wenn Sie zu einer Route navigieren.

Während next build wird generateStaticParams ausgeführt, bevor die entsprechenden Layouts oder Seiten generiert werden.

Während der Revalidierung (ISR) wird generateStaticParams nicht erneut aufgerufen.

generateStaticParams ersetzt die getStaticPaths-Funktion im Pages Router.

Parameter

options.params (optional)

Wenn mehrere dynamische Segmente in einer Route generateStaticParams verwenden, wird die untergeordnete generateStaticParams-Funktion einmal für jeden Satz von params ausgeführt, den das übergeordnete Element generiert.

Das params-Objekt enthält die gefüllten params aus dem übergeordneten generateStaticParams, die verwendet werden können, um die params in einem untergeordneten Segment zu generieren.

Rückgabewert

generateStaticParams sollte ein Array von Objekten zurückgeben, wobei jedes Objekt die gefüllten dynamischen Segmente einer einzelnen Route darstellt.

Jede Eigenschaft im Objekt ist ein dynamisches Segment, das für die Route ausgefüllt werden soll.
Der Eigenschaftsname ist der Name des Segments, und der Eigenschaftswert ist der Wert, mit dem das Segment ausgefüllt werden soll.

Beispiel-Route	Rückgabetyp von `generateStaticParams`
`/product/[id]`	`{ id: string }[]`
`/products/[category]/[product]`	`{ category: string, product: string }[]`
`/products/[...slug]`	`{ slug: string[] }[]`

Einzelnes dynamisches Segment

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

// Drei Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
// - /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' }]
}

// Drei Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
// - /product/1
// - /product/2
// - /product/3
export default function Page({ params }) {
  const { id } = params
  // ...
}

Mehrere dynamische Segmente

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

// Drei Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
// - /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' },
  ]
}

// Drei Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
// - /products/a/1
// - /products/b/2
// - /products/c/3
export default function Page({ params }) {
  const { category, product } = params
  // ...
}

Catch-all dynamisches Segment

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

// Drei Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
// - /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'] }]
}

// Drei Versionen dieser Seite werden statisch generiert
// unter Verwendung der von `generateStaticParams` zurückgegebenen `params`
// - /product/a/1
// - /product/b/2
// - /product/c/3
export default function Page({ params }) {
  const { slug } = params
  // ...
}

Beispiele

Mehrere dynamische Segmente in einer Route

Sie können Parameter für dynamische Segmente oberhalb des aktuellen Layouts oder der aktuellen Seite generieren, aber nicht unterhalb. Beispielsweise bei der Route app/products/[category]/[product]:

app/products/[category]/[product]/page.js kann Parameter für sowohl [category] als auch [product] generieren.
app/products/[category]/layout.js kann nur Parameter für [category] generieren.

Es gibt zwei Ansätze, um Parameter für eine Route mit mehreren dynamischen Segmenten zu generieren:

Parameter von unten nach oben generieren

Generieren Sie mehrere dynamische Segmente aus dem untergeordneten Routensegment.

// Generiert Segmente für sowohl [category] als auch [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 }
}) {
  // ...
}

// Generiert Segmente für sowohl [category] als auch [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 }) {
  // ...
}

Parameter von oben nach unten generieren

Generieren Sie zuerst die übergeordneten Segmente und verwenden Sie das Ergebnis, um die untergeordneten Segmente zu generieren.

// Generiert Segmente für [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 } }) {
  // ...
}

// Generiert Segmente für [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 }) {
  // ...
}

Die generateStaticParams-Funktion eines untergeordneten Routensegments wird einmal für jedes Segment ausgeführt, das ein übergeordnetes generateStaticParams generiert.

Die untergeordnete generateStaticParams-Funktion kann die params verwenden, die von der übergeordneten generateStaticParams-Funktion zurückgegeben werden, um ihre eigenen Segmente dynamisch zu generieren.

// Generiert Segmente für [product] unter Verwendung der `params`,
// die von der übergeordneten `generateStaticParams`-Funktion übergeben werden
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 }
}) {
  // ...
}

// Generiert Segmente für [product] unter Verwendung der `params`,
// die von der übergeordneten `generateStaticParams`-Funktion übergeben werden
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 }) {
  // ...
}

Wissenswert: fetch-Anfragen werden automatisch gememoized für dieselben Daten über generateMetadata, generateStaticParams, Layouts, Seiten und Serverkomponenten hinweg. React cache kann verwendet werden, wenn fetch nicht verfügbar ist.

Versionsverlauf

Version	Änderungen
`v13.0.0`	`generateStaticParams` eingeführt.

On this page