Dynamische Routen in Next.js

Dynamische Routen ermöglichen es, Seiten basierend auf Parametern zu erstellen.

Ordnerstruktur

Erstellen Sie dynamische Segmente mit eckigen Klammern:

app/
  [category]/
    page.tsx
    [slug]/
      page.tsx

generateStaticParams

Für Static Export müssen alle möglichen Pfade zur Build-Zeit bekannt sein:

export function generateStaticParams() {
  return [
    { category: 'tutorials', slug: 'erste-schritte' },
    { category: 'tutorials', slug: 'dynamische-routen' },
  ]
}

Params verwenden

In Next.js 15 sind params ein Promise:

interface PageProps {
  params: Promise<{ category: string; slug: string }>
}

export default async function Page({ params }: PageProps) {
  const { category, slug } = await params
  // ...
}