Dynamische Routensegmente

Wenn Sie die genauen Namen von Routensegmenten nicht im Voraus kennen und Routen aus dynamischen Daten erstellen möchten, können Sie dynamische Segmente verwenden, die zur Laufzeit der Anfrage oder während des Builds vorgerendert werden.

Konvention

Ein dynamisches Segment kann erstellt werden, indem ein Ordnername in eckige Klammern gesetzt wird: [Ordnername]. Beispielsweise könnte ein Blog die folgende Route enthalten: app/blog/[slug]/page.js, wobei [slug] das dynamische Segment für Blogbeiträge ist.

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

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

Route	Beispiel-URL	`params`
`app/blog/[slug]/page.js`	`/blog/a`	`{ slug: 'a' }`
`app/blog/[slug]/page.js`	`/blog/b`	`{ slug: 'b' }`
`app/blog/[slug]/page.js`	`/blog/c`	`{ slug: 'c' }`

Catch-all-Segmente

Dynamische Segmente können erweitert werden, um alle nachfolgenden Segmente zu erfassen, indem man Auslassungspunkte innerhalb der Klammern hinzufügt: [...Ordnername].

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

Route	Beispiel-URL	`params`
`app/shop/[...slug]/page.js`	`/shop/a`	`{ slug: ['a'] }`
`app/shop/[...slug]/page.js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`app/shop/[...slug]/page.js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`

Optionale Catch-all-Segmente

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

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 auch die Route ohne den Parameter passt (/shop im obigen Beispiel).

Route	Beispiel-URL	`params`
`app/shop/[[...slug]]/page.js`	`/shop`	`{ slug: undefined }`
`app/shop/[[...slug]]/page.js`	`/shop/a`	`{ slug: ['a'] }`
`app/shop/[[...slug]]/page.js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`app/shop/[[...slug]]/page.js`	`/shop/a/b/c`	`{ slug: ['a', 'b', 'c'] }`

TypeScript

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

Route	`params` Typdefinition
`app/blog/[slug]/page.js`	`{ slug: string }`
`app/shop/[...slug]/page.js`	`{ slug: string[] }`
`app/shop/[[...slug]]/page.js`	`{ slug?: string[] }`
`app/[categoryId]/[itemId]/page.js`	`{ categoryId: string, itemId: string }`

Verhalten

Da das params-Prop ein Promise ist, müssen Sie async/await oder Reacts use-Funktion verwenden, um auf die Werte zuzugreifen.
- In Version 14 und früher war params ein synchrones Prop. Zur Abwärtskompatibilität kann es in Next.js 15 weiterhin synchron abgerufen werden, dieses Verhalten wird jedoch in Zukunft veraltet sein.

Beispiele

Mit `generateStaticParams`

Die Funktion generateStaticParams kann verwendet werden, um Routen während des Builds statisch zu generieren anstatt bei Bedarf zur Laufzeit der Anfrage.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())

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

Wenn fetch innerhalb der generateStaticParams-Funktion verwendet wird, werden die Anfragen automatisch dedupliziert. Dadurch werden mehrere Netzwerkaufrufe für dieselben Daten in Layouts, Seiten und anderen generateStaticParams-Funktionen vermieden, was die Build-Zeit verkürzt.