Demo

Dynamic Routes

Dynamic routes let you create pages from dynamic data using square bracket notation.
Three types: single segment [slug], catch-all [...slug], and optional catch-all [[...slug]].
Use generateStaticParams to pre-render dynamic routes at build time.
Use notFound() to handle invalid params gracefully.
Access params via the async params prop in page components.
Combine with generateMetadata for dynamic SEO.

app/post/[slug]/page.tsx

1export async function generateStaticParams() {
2  const posts = await getPosts();
3  return posts.map((post) => ({
4    slug: post.slug,
5  }));
6}
7
8export default async function Page({
9  params,
10}: {
11  params: Promise<{ slug: string }>;
12}) {
13  const { slug } = await params;
14  const post = await getPost(slug);
15
16  if (!post) {
17    notFound();
18  }
19
20  return <Article post={post} />;
21}

Route Types

Type	Folder	Example URL	`params.slug`
Single	`[slug]`	`/post/hello`	`"hello"`
Catch-all	`[...slug]`	`/docs/a/b/c`	`["a","b","c"]`
Optional	`[[...slug]]`	`/shop`	`undefined`
Optional	`[[...slug]]`	`/shop/a/b`	`["a","b"]`

Demo

Single Segment: Click posts to see [slug] in action.
Catch-all: Navigate docs with nested paths.
Optional Catch-all: Browse shop with variable depth.
Not Found: Try invalid URLs to see error handling.

Visual Summary

Dynamic route resolution

URL

Segment match

params

Render

Use `generateStaticParams` to pre-render and `notFound()` for invalid paths.

Key Takeaways

Topic	Guidance
Types	Single, catch-all, optional catch-all
Data	Use `params` and `generateStaticParams` for SSG
Errors	Call `notFound()` when data is missing

Pitfalls & Tips

Keep optional catch-all routes explicit to avoid ambiguous matches.
Validate params early to avoid extra data fetching.

Links

layout.tsx

docs/[...slug]/page.tsx

Catch-all: [...slug]

params.slug = ["getting-started"]

Segments: 1 • Path: /getting-started

Getting Started

Welcome to the documentation. This demonstrates catch-all routes with a single segment.

The App Router Gallery

Dynamic Routes

Route Types

Demo

Visual Summary

Dynamic route resolution

Key Takeaways

Pitfalls & Tips

Links

Catch-all: [...slug]

Getting Started

Other documentation pages: