Next.js Dynamische Routen und Slugs: Entwickler-Guide

Next.js verwendet Dateisystem-Routing mit Bracket-Syntax für dynamische Segmente: [slug].

Grundlegende dynamische Route

// app/blog/[slug]/page.tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <h1>{params.slug}</h1>;
}

Statische Parameter generieren

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(post => ({ slug: post.slug }));
}

Catch-All-Routen

[...slug] matcht /a/b/c. [[...slug]] matcht zusätzlich die Wurzel-Route.

Slugs generieren

Verwenden Sie unseren URL-Slug-Generator oder den Kebab-Case-Konverter.