Dynamic Segments (useParams)

Reading [slug] and [id] values from the URL path.

Next.js3 min readConcept 41 of 65

Dynamic Routing

useParams is a Client Component hook that lets you read a route's dynamic segments.

Dynamic segments are the parts of your folder structure wrapped in brackets, like [id] or [slug].

Client-Side Access

While Server Components automatically receive params as a prop, Client Components deeper in the tree do not.

Instead of manually drilling the params prop down through multiple layers of components, any Client Component can simply call useParams() to access the current dynamic segments.

The Returned Object

The hook returns an object where the keys are the folder names (without brackets) and the values are the actual strings from the URL.

For example, visiting /shop/shoes/nike in a route structured as /shop/[category]/[brand] will return { category: 'shoes', brand: 'nike' }.

The Object Parser

Select a route structure and click the test URLs. Watch how useParams parses the URL string into a usable JavaScript object.

Browser URL

Select a URL to visit:

Client Component

/app/blog/[slug]/page.tsx
const params = useParams();
params object:
{
"slug": "hello-world",
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If your file structure is `/app/store/[storeId]/item/[itemId]/page.tsx` and the user visits `/store/55/item/99`, what does `useParams()` return?

Remember this

  • useParams reads dynamic route segments (folders with [brackets]).
  • It returns an object mapping the folder name to the URL value.
  • It does NOT read query strings (?key=value).
  • Catch-all routes ([...slug]) will return an array of strings.

Done with this concept?

Mark it complete to track your progress. No login needed.