Dynamische Routes und Route-Gruppen

Dynamische Segmente

// app/products/[id]/page.tsx
export default function ProductPage({ params }: { params: { id: string } }) {
  return <h1>Product {params.id}</h1>;
}
// → /products/123 → params.id = '123'

Typisierte Params

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug);
  if (!post) notFound();
  return <article>{post.content}</article>;
}

Catch-all-Segmente

// app/docs/[...path]/page.tsx
export default function DocsPage({ params }: { params: { path: string[] } }) {
  // /docs/react/hooks → params.path = ['react', 'hooks']
  return <DocViewer path={params.path} />;
}

Optionale Catch-all-Segmente

// app/[[...lang]]/page.tsx
// Matches /, /en, /en/about, /fr/products/123
export default function Page({ params }: { params: { lang?: string[] } }) {
  const lang = params.lang?.[0] ?? 'en';
  return <div lang={lang}>...</div>;
}

generateStaticParams

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map(p => ({ slug: p.slug }));
}
// → builds /blog/hello-world, /blog/react-tips etc. statically

Routengruppen — (folder)

// File structure:
// app/(marketing)/about/page.tsx → /about
// app/(marketing)/blog/page.tsx  → /blog
// app/(app)/dashboard/page.tsx   → /dashboard
// (marketing) and (app) don't appear in URLs

Routengruppen mit gemeinsamen Layouts

// app/(marketing)/layout.tsx — marketing shell
// app/(app)/layout.tsx — authenticated app shell
// Both groups share app/layout.tsx as the root

Parallele Routen — @slot

// app/@modal/login/page.tsx
// app/layout.tsx
export default function RootLayout({ children, modal }) {
  return (
    <div>
      {children}
      {modal} {/* renders @modal/login/page.tsx side by side */}
    </div>
  );
}

Abfangende Routen — (..)

// Soft navigation shows modal:
// app/@modal/(..)/photos/[id]/page.tsx
// Hard navigation shows full page:
// app/photos/[id]/page.tsx

Dynamische Routen-Metadaten

export async function generateMetadata({ params }: { params: { id: string } }) {
  const product = await getProduct(params.id);
  return { title: product.name, description: product.description };
}

Kurztest

Zusammenfassung