#Dynamic Routes, Catch-Alls & Type-Safe Params¶

Single Dynamic Segment¶

app/users/[id]/page.tsx     →  /users/:id

tsx

6 lines

1export default async function UserPage({ params }: { params: Promise<{ id: string }> }) {
2  const { id } = await params;
3  const user = await db.user.findUnique({ where: { id } });
4  if (!user) notFound();
5  return <h1>{user.name}</h1>;
6}

Multiple Dynamic Segments¶

app/blog/[year]/[slug]/page.tsx   →  /blog/2026/hello-world

tsx

6 lines

1type Params = Promise<{ year: string; slug: string }>;
2
3export default async function Post({ params }: { params: Params }) {
4  const { year, slug } = await params;
5  // …
6}

Catch-All Segments¶

app/docs/[...path]/page.tsx   →  /docs/a, /docs/a/b, /docs/a/b/c

params.path is a string array:

tsx

2 lines

1const { path } = await params;
2// /docs/a/b/c  →  path = ["a", "b", "c"]

Optional Catch-All¶

Wrap the brackets: ...path. Matches both /docs (no segments) and /docs/a/b.

URL	`params.path`
`/docs`	`undefined`
`/docs/intro`	`["intro"]`
`/docs/api/auth`	`["api", "auth"]`

Pre-Generating Pages with `generateStaticParams`¶

Tell Next which dynamic routes to prerender at build time:

tsx

8 lines

1// app/blog/[slug]/page.tsx
2export async function generateStaticParams() {
3  const posts = await db.post.findMany({ select: { slug: true } });
4  return posts.map((p) => ({ slug: p.slug }));
5}
6
7// Optionally: error on unknown slugs (no on-demand SSG)
8export const dynamicParams = false;

Generating Per-Route Metadata¶

tsx

13 lines

1import type { Metadata } from "next";
2
3export async function generateMetadata(
4  { params }: { params: Promise<{ slug: string }> }
5): Promise<Metadata> {
6  const { slug } = await params;
7  const post = await getPost(slug);
8  return {
9    title: post.title,
10    description: post.excerpt,
11    openGraph: { images: [post.coverImage] },
12  };
13}

Typed Routes for Dynamic Segments¶

With experimental.typedRoutes: true and template literals:

tsx