Sign in
Skip to solution
mediumFrontend

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

925 views
01

Understand the problem

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

nextjsdynamic-routesroutingparams
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

A [id] folder creates a dynamic segment whose value is passed via params; [...slug] is a catch-all that matches multiple segments; [[...slug]] is an optional catch-all that also matches the base path. They let one route handle many URLs.

Solution ready — 2 min read

Classified // press E to declassify

04

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'])
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 27 of 95 decoded in the Next.js track. One more won't hurt.

Back to track