Dynamische Routen

Wenn Sie die genauen Segmentnamen nicht im Voraus kennen und Routen aus dynamischen Daten erstellen möchten, können Sie dynamische Segmente verwenden, die zur Laufzeit gefüllt oder vorgerendert werden.

Konvention

Ein dynamisches Segment kann erstellt werden, indem ein Ordnername in eckige Klammern gesetzt wird: [folderName]. Zum Beispiel [id] oder [slug].

Dynamische Segmente werden als params-Prop an die Funktionen layout, page, route und generateMetadata übergeben.

Beispiel

Ein Blog könnte beispielsweise die folgende Route enthalten: app/blog/[slug]/page.js, wobei [slug] das dynamische Segment für Blogbeiträge ist.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>Mein Beitrag: {params.slug}</div>
}

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

Weitere Informationen zur Generierung der Parameter für das Segment finden Sie auf der Seite generateStaticParams().

Gut zu wissen: Dynamische Segmente entsprechen dynamischen Routen im pages-Verzeichnis.

Statische Parameter generieren

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

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,
  }))
}

Der Hauptvorteil der generateStaticParams-Funktion ist die intelligente Abfrage von Daten. Wenn Inhalte innerhalb der generateStaticParams-Funktion mit einer fetch-Anfrage abgerufen werden, werden die Anfragen automatisch zwischengespeichert. Das bedeutet, dass eine fetch-Anfrage mit denselben Argumenten über mehrere generateStaticParams, Layouts und Seiten hinweg nur einmal durchgeführt wird, was die Build-Zeiten verkürzt.

Verwenden Sie den Migrationsleitfaden, wenn Sie vom pages-Verzeichnis migrieren.

Weitere Informationen und erweiterte Anwendungsfälle finden Sie in der Dokumentation zur generateStaticParams-Serverfunktion.

Catch-all-Segmente

Dynamische Segmente können durch Hinzufügen von Auslassungspunkten in den Klammern [...folderName] erweitert werden, um nachfolgende Segmente abzufangen.

Beispielsweise passt app/shop/[...slug]/page.js zu /shop/clothes, aber auch zu /shop/clothes/tops, /shop/clothes/tops/t-shirts usw.

Optionale Catch-all-Segmente

Catch-all-Segmente können optional gemacht werden, indem der Parameter in doppelte eckige Klammern gesetzt wird: [[...folderName]].

Beispielsweise passt app/shop/[[...slug]]/page.js auch zu /shop, zusätzlich zu /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts.

Der Unterschied zwischen Catch-all und optionalen Catch-all-Segmenten besteht darin, dass bei optionalen Segmenten die Route ohne den Parameter ebenfalls übereinstimmt (/shop im obigen Beispiel).

TypeScript

Bei Verwendung von TypeScript können Sie Typen für params abhängig vom konfigurierten Routensegment hinzufügen.

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

export default function Page({ params }) {
  return <h1>Meine Seite</h1>
}

Gut zu wissen: Dies könnte in Zukunft automatisch durch das TypeScript-Plugin erfolgen.