Dynamische Routen

Wenn Sie die genauen Segmentnamen im Voraus nicht 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().

Wissenswert: 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 zu generieren und nicht erst bei Bedarf zur Laufzeit.

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 Funktion generateStaticParams ist die intelligente Abfrage von Daten. Wenn Inhalte innerhalb der Funktion generateStaticParams über eine 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 passt (/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>
}

Wissenswert: Dies könnte in Zukunft automatisch durch das TypeScript-Plugin erfolgen.