Dynamic Routes

Route parameters, catch-all routes, optional catch-all, and dynamic segments.

Overview

Dynamic routes enable flexible URL patterns in Next.js.

Key Concepts

• Dynamic Segments — [param] for single values
• Catch-All — [...slug] for multiple segments
• Optional Catch-All — [[...slug]] for optional segments
• generateStaticParams — Pre-generate dynamic routes
• Server Components — Access params in server components

Code Examples

// app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  return <article>{post.content}</article>;
}

// Generate static params for SSG
export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

// app/shop/[...slug]/page.js
export default async function ShopPage({ params }) {
  // URL: /shop/shoes/nike/air-max
  // params.slug = ['shoes', 'nike', 'air-max']
  return <div>Path: {params.slug.join('/')}</div>;
}

// Optional catch-all
// app/docs/[[...slug]]/page.js
export default async function DocsPage({ params }) {
  // URL: /docs OR /docs/getting-started
  // params.slug = undefined OR ['getting-started']
  const slug = params.slug?.join('/') || 'index';
  return <DocContent slug={slug} />;
}

// Multiple dynamic segments
// app/[category]/[id]/page.js
export default async function ProductPage({ params }) {
  const product = await getProduct(params.category, params.id);
  return <ProductDetails product={product} />;
}

Practice

Build a blog with dynamic routes and static generation.