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

post/[slug]/page.tsx

Single Segment: [slug]

params.slug = "valid-post"

Valid Post

2024-01-17

This post exists to demonstrate the difference between valid and invalid routes.

Slug: valid-postType: Single Segment [slug]

← Back to Overview Hello World My First Post

The App Router Gallery

Single Segment: [slug]