Deviopath › Next.js

Match Dynamic Segments

Medium · Routing

In the App Router, folder names in square brackets are **dynamic segments**. Next.js matches them against the URL and passes the values to your page as params:

- [slug] matches exactly one segment: app/blog/[slug]/page.tsx matches /blog/hello with { slug: "hello" }.

- [...slug] is a **catch-all**: it matches one or more segments and the value is an array. app/docs/[...slug] matches /docs/a/b with { slug: ["a", "b"] }, but not /docs.

- [[...slug]] is an **optional catch-all**: like a catch-all, but it also matches zero segments. For /shop the param is simply missing (undefined), so the params object is {}.

Write matchRoute(pattern, pathname) that returns the params object, or null if the pathname does not match.

- Split both strings on / and ignore empty parts (so trailing slashes do not matter).

- Static segments must be equal (case-sensitive).

- Catch-all segments are always the last part of a pattern.

- Decode every value with decodeURIComponent, like Next.js does (hello%20world becomes "hello world").

Next: Route Table from Files