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 entweder zum Zeitpunkt der Anfrage gefüllt oder vorgerendert zur Bauzeit generiert werden.

Konvention

Ein dynamisches Segment kann erstellt werden, indem Sie den Ordnernamen in eckige Klammern einschließen: [folderName]. Zum Beispiel [id] oder [slug].

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

Beispiel

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

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const slug = (await params).slug
  return <div>Mein Beitrag: {slug}</div>
}

Sehen Sie die Seite generateStaticParams(), um zu erfahren, wie Sie die Parameter für das Segment generieren.

Hinweis

• Da die params-Eigenschaft ein Promise ist, müssen Sie async/await oder React's use-Funktion verwenden, um auf die Werte zuzugreifen.
  • In Version 14 und früher war params eine synchrone Eigenschaft. Zur Abwärtskompatibilität können Sie in Next.js 15 noch synchron darauf zugreifen, aber dieses Verhalten wird in Zukunft als veraltet gekennzeichnet.
• Dynamische Segmente entsprechen Dynamischen Routen im pages-Verzeichnis.

Statische Parametergenerierung

Die generateStaticParams-Funktion kann in Kombination mit dynamischen Routensegmenten verwendet werden, um Routen statisch zu generieren zur Bauzeit anstelle von bedarfsgerechter Generierung zur Anforderungszeit.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

Der primäre Vorteil der generateStaticParams-Funktion ist ihr intelligentes Abrufen von Daten. Wenn Inhalte innerhalb der generateStaticParams-Funktion mit einer fetch-Anfrage abgerufen werden, werden die Anfragen automatisch memoisiert. Das bedeutet, dass eine fetch-Anfrage mit denselben Argumenten über mehrere generateStaticParams, Layouts und Seiten hinweg nur einmal durchgeführt wird, was die Bauzeiten reduziert.

Verwenden Sie den Migrationsleitfaden, wenn Sie aus dem pages-Verzeichnis migrieren.

Weitere Informationen und erweiterte Anwendungsfälle finden Sie in der generateStaticParams-Serverfunktionsdokumentation.

Catch-all-Segmente

Dynamische Segmente können erweitert werden, um nachfolgende Segmente zu erfassen, indem Sie ein Auslassungszeichen innerhalb der Klammern [...folderName] hinzufügen.

Beispielsweise wird app/shop/[...slug]/page.js /shop/clothes sowie /shop/clothes/tops, /shop/clothes/tops/t-shirts und so weiter übereinstimmen.

Optionale Catch-all-Segmente

Catch-all-Segmente können optional gemacht werden, indem Sie den Parameter in doppelte eckige Klammern einschließen: [[...folderName]].

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

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

TypeScript

Bei Verwendung von TypeScript können Sie Typen für params je nach konfiguriertem Routensegment hinzufügen.

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

Hinweis: Dies kann in Zukunft möglicherweise automatisch durch das TypeScript-Plugin erfolgen.