mediumFrontend

What are dynamic routes and catch-all segments in Next.js?

Q: What are dynamic routes and catch-all segments in Next.js?

**TL;DR.** A [id] folder creates a **dynamic segment** whose value arrives via params ; [...slug] is a **catch-all** matching multiple segments; [[...slug]] is an **optional catch-all** that also matches the base path. They let **one route file** handle many URLs. [id] → /posts/42 [...slug] → /a/b/c [[...slug]] → / and /a/b <rect clas

925 views

Understand the problem

[id], [...slug], and [[...slug]] route patterns.

nextjsdynamic-routesroutingparams

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Reading params in a dynamic route

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

// app/docs/[...path]/page.tsx → params.path is string[] (['a','b'])

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What makes a route dynamic in the Next.js App Router?

How do you analyze and reduce bundle size in Next.js?