How do dynamic routes, catch-all and optional catch-all segments work?

Summary

[slug] matches one segment, [...slug] matches one or more segments (array), and [[...slug]] also matches the parent path with no segments. Params arrive in the page's params prop.

Longer Answer

In Next.js 15+, params and searchParams are Promises in Server Components, so you await params. Use generateStaticParams to pre-render known params at build time.

Code Example

// app/blog/[slug]/page.tsx
export default async function Post({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await getPost(slug);
  if (!post) notFound();
  return <article>{post.title}</article>;
}

export async function generateStaticParams() {
  const posts = await getAllPosts();
  return posts.map((p) => ({ slug: p.slug }));
}

Key Points

• [id] single segment
• [...parts] one or more
• [[...parts]] zero or more
• params is a Promise in Next 15+