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 zur Laufzeit gefüllt oder 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 Route pages/blog/[slug].js enthalten, 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 man drei Punkte in die Klammern setzt: [...segmentName].
Zum Beispiel wird pages/shop/[...slug].js mit /shop/clothes, aber auch mit /shop/clothes/tops, /shop/clothes/tops/t-shirts usw. übereinstimmen.
| 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 Parameter übereinstimmt (/shop im obigen Beispiel).
| Route | Beispiel-URL | params |
|---|---|---|
pages/shop/[[...slug]].js | /shop | {} |
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'] } |