Hi @bright egret. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#dynamic params api
midnight vineBOT
In Next.js, the useParams hook is used to read a route's dynamic parameters filled in by the current URL. This hook is intended to be used in a Client Component. Here's an example of how to use it:
'use client'
import { useParams } from 'next/navigation'
export default function ExampleClientComponent() {
const params = useParams<{ tag: string; item: string }>()
// 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, params is 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. The properties value will either be a string or array of string's depending on the type of dynamic segment.
If you want to access dynamic parameters on the server-side, you can use the getServerSideProps or getStaticProps functions in Next.js. These functions provide a context parameter which includes a params property that holds the dynamic route parameters.
However, if you're trying to access dynamic parameters from an API, you would typically do this in the API route handler itself, not in a Client Component. The API route handler receives a req (request) object, and you can access the dynamic parameters from req.query.
Please note that if a component doesn't care at which route it renders then it shouldn't have useParams() and instead accept the params needed as props. This will also make clear which route requires which params, type-wise.
For more information, you can refer to the Next.js documentation on useParams (https://nextjs.org/docs/app/api-reference/functions/use-params) and dynamic routes (https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes).
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
If you're using useParams in a route file (like route.ts), it's important to note that useParams is a Client Component hook and it's intended to be used in a Client Component, not in a route file.
In a route file, you typically handle incoming requests and send responses. If you want to access dynamic parameters in a route file, you would typically do this in the API route handler itself. The API route handler receives a req (request) object, and you can access the dynamic parameters from req.query.
Here's an example of how you might access dynamic parameters in an API route handler:
export default function handler(req, res) {
const { id } = req.query
// Now you can use the `id` in your handler...
}
In this example, if you navigate to /api/someRoute/123, req.query.id would be '123'.