Dynamic Routes

Dynamic, catch-all, and optional catch-all routes map URL params to params.

Dynamic routes

• Use square brackets in the segment name.
• app/blog/[slug]/page.js → /blog/:slug
• app/user/[id]/page.js → /user/:id

export default function Page({ params }) {
  return <h1>{params.slug}</h1>;
}

Catch-all routes

• app/docs/[...slug]/page.js matches any depth.
• params.slug is an array of strings.

Optional catch-all

• app/docs/[[...slug]]/page.js also matches the root.
• If empty, params.slug is undefined.

Layout behavior

• Parent layouts apply to all child segments.
• Layouts persist; only page.js remounts on param change.