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 beim Prerendering zur Build-Zeit vorgerendert werden.
Konvention
Ein dynamisches Segment wird erstellt, indem ein Datei- oder Ordnername in eckige Klammern gesetzt wird: [segmentName]. Zum Beispiel [id] oder [slug].
Auf dynamische Segmente kann über useRouter zugegriffen 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 in die Klammern gesetzt wird [...segmentName].
Zum Beispiel wird pages/shop/[...slug].js auf /shop/clothes passen, aber auch auf /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 auf /shop passen, 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 Parameter ebenfalls gematcht wird (/shop im obigen Beispiel).
| Route | Beispiel-URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | { slug: [] } |
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'] } |