How to use useParams() in server components?
#How to get path params in server components?
teal moon
past berryBOT
Hi @teal moon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
I'm sorry, but according to the information provided, useParams is a Client Component hook and is not supported in Server Components. This is to prevent stale values during partial rendering. You can use useParams to read a route's dynamic params filled in by the current URL in a Client Component. Here is an example:
'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams()
// Route -> /shop/[tag]/[item]
// URL -> /shop/shoes/nike-air-max-97
// `params` -> { tag: 'shoes', item: 'nike-air-max-97' }
console.log(params)
return <></>
}
In this example, useParams returns an object containing the current route's filled in dynamic parameters. Each property in the object is an active dynamic segment. The properties name is the segment's name, and the properties value is what the segment is filled in with.
For more information, you can refer to the Next.js documentation (https://nextjs.org/docs/app/api-reference/functions/use-params).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
teal moon
how to get params in server components?
@past berry how to get params in server components?
past berryBOT
Let me check the knowledge base for you. One moment! :books:
In Server Components, you can access the route segments through the params prop. Here's an example:
export default function Page({ params }) {
// Access route segments via `params`
console.log(params)
// Rest of your component
}
In this example, params is an object where each property is a route segment. The property's name is the segment's name, and the property's value is what the segment is filled in with.