xxxxxxxxxx
'use client'
import { useSearchParams } from 'next/navigation'
export default function SearchBar() {
const searchParams = useSearchParams()
const search = searchParams.get('search')
// URL -> `/dashboard?search=my-project`
// `search` -> 'my-project'
return <>Search: {search}</>
}
xxxxxxxxxx
Consider the following page: pages/post/[pid].js:
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post
https://stackoverflow.com/questions/43862600/how-can-i-get-query-string-parameters-from-the-url-in-next-js
xxxxxxxxxx
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post
xxxxxxxxxx
// For example for URL: {__APP_URL__}/api/device/10001?q=hello
// The API route pages/api/device/[device_id].js has the following code:
export default function handler(req, res) {
res.status(200).json(req.query) // {"q":"hello","device_id":"10001"}
}