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 der Anfrage ausgefüllt oder vorgerendert werden.

Konvention

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

Dynamische Segmente können über useRouter abgerufen werden.

Beispiel

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

import { useRouter } from 'next/router'

export default function Page() {
  const router = useRouter()
  return <p>Beitrag: {router.query.slug}</p>
}

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

Catch-all-Segmente

Dynamische Segmente können erweitert werden, um alle nachfolgenden Segmente zu erfassen, indem ein Auslassungspunkte innerhalb der Klammern hinzugefügt wird [...segmentName].

Zum Beispiel wird pages/shop/[...slug].js mit /shop/clothes übereinstimmen, aber auch mit /shop/clothes/tops, /shop/clothes/tops/t-shirts usw.

Route	Beispiel-URL	`params`
`pages/shop/[...slug].js`	`/shop/a`	`{ slug: ['a'] }`
`pages/shop/[...slug].js`	`/shop/a/b`	`{ slug: ['a', 'b'] }`
`pages/shop/[...slug].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: [[...segmentName]].

Zum Beispiel wird pages/shop/[[...slug]].js auch mit /shop übereinstimmen, 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 übereinstimmt (/shop im obigen Beispiel).

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

Verlinkung und Navigation

Erfahren Sie, wie die Navigation in Next.js funktioniert und wie Sie die Link-Komponente sowie den `useRouter`-Hook verwenden.

useRouter

Erfahren Sie mehr über die API des Next.js Routers und wie Sie mit dem useRouter Hook auf die Router-Instanz in Ihrer Seite zugreifen können.