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]-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-Segmentkonfiguration verwenden, um zu steuern, was passiert, wenn ein dynamisches Segment aufgerufen wird, das nicht mit generateStaticParams generiert wurde.

Während next dev wird generateStaticParams beim Navigieren zu einer Route aufgerufen.

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 gefüllt werden soll.

Beispielroute	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. Zum Beispiel für die 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 [category] und [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 [category] und [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 des übergeordneten generateStaticParams verwenden, um ihre eigenen Segmente dynamisch zu generieren.

// Generiert Segmente für [product] unter Verwendung der `params` des übergeordneten Segments
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` des übergeordneten Segments
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 zwischengespeichert für dieselben Daten über alle generate-präfixierten Funktionen, Layouts, Seiten und Serverkomponenten hinweg. React cache kann verwendet werden, falls fetch nicht verfügbar ist.

Nur eine Teilmenge von Parametern generieren

Sie können eine Teilmenge von Parametern für eine Route generieren, indem Sie ein Array von Objekten zurückgeben, die nur die dynamischen Segmente enthalten, die Sie generieren möchten. Mit der dynamicParams-Segmentkonfiguration können Sie steuern, was passiert, wenn ein dynamisches Segment aufgerufen wird, das nicht mit generateStaticParams generiert wurde.

app/blog/[slug]/page.js

// Alle Beiträge außer den Top 10 werden als 404 zurückgegeben
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,
  }))
}

Versionsverlauf

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

On this page