Read a single dynamic segment
A product page at app/products/[productId]/page.tsx needs the selected product identifier.
Next.js 16+ · Hook
useParams
useParams is a Client Component hook for reading dynamic route segments from the current App Router URL. It returns segment values as strings or string arrays, depending on the segment declaration.
How it works
In a Client Component, useParams reads the dynamic segments matched by the current URL. It returns an object whose keys are segment names and whose values are strings or string arrays according to the segment type; routes without dynamic segments produce an empty object.
Syntax
useParams<T>(): TReturns
An object containing the current route's filled dynamic parameters; each value is a string or an array of strings depending on the dynamic segment type. With no dynamic parameters, it returns an empty object.
Key points
- Import useParams from next/navigation and call it only in a Client Component.
- The returned object's properties correspond to dynamic segments active in the current route.
- A property key comes from the bracketed segment name, and its value comes from the URL.
- The segment declaration determines whether a value is a string or an array of strings.
- Routes with no dynamic path parameters return an empty object.
- The hook has no runtime arguments.
Common mistakes
- The component using the hook must be a Client Component.
- A route without dynamic segments yields an empty object, so do not expect query-string values here.
- Catch-all segments return arrays, while ordinary dynamic segments return strings.
Example: Read a dynamic route segment
'use client'
import { useParams } from 'next/navigation'
export default function ProductPage() {
const params = useParams<{ productId: string }>()
return <h1>Product: {params.productId}</h1>
}Reads the dynamic productId segment from the current App Router URL.
When to use it
Handle catch-all paths
A route using [...slug] needs each path portion as an ordered list.
Inspect nested route context
A shared client component needs the active nested route's dynamic segment without receiving it as a prop.
Interview questions
QWhat does useParams do, and where is it used?
useParams is a Client Component hook imported from next/navigation. It returns the active dynamic route segments from the current URL, using segment names as object keys.
Follow-up: How are catch-all segments represented? Their values are arrays of strings, unlike ordinary dynamic segments, which are strings.
QWhat is the signature and shape of its result?
The hook takes no arguments. A route such as app/products/[productId]/page.tsx exposes an object with a productId property when rendered for a matching URL.
Follow-up: What happens if the route has no dynamic segments? The hook returns an empty object.
QHow does useParams differ from reading query parameters?
useParams reads dynamic path segments, not query-string parameters. Use a separate query-string API when the value comes after the URL's question mark.
Follow-up: Why should route parameters and query parameters remain conceptually separate? They represent different URL parts and are exposed through different APIs.
Related
usePathnameuseSearchParamsuseRouterdynamic segments