How can I get (query string) parameters from the URL in Next.js?

tux_tina

When I click on a link in my /index.js , it brings me to /about.js page. However, when I'm passing a parameter name through the URL (like /about?name=leangchhean ) from /index.js to /about.js , I don't know how to get it in the /about.js page. index.js import Link from 'next/link'; export default () => ( <div> Click{' '} <Link href={{ pathname: 'about', query: { name: 'leangchhean' } }}> <a>here</a> </Link>{' '} to read more </div> );

Originally asked by Sour LeangChhean on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Use router-hook. You can use the useRouter hook in any component in your application. https://nextjs.org/docs/api-reference/next/router#userouter pass Param import Link from "next/link"; <Link href={{ pathname: '/search', query: { keyword: 'this way' } }}><a>path</a></Link> Or import Router from 'next/router' Router.push({ pathname: '/search', query: { keyword: 'this way' }, }) In Component import { useRouter } from 'next/router' export default () => { const router = useRouter() console.log(router.query); ... }

Full answer by junho: https://stackoverflow.stackexchange.com/a/57389355 (CC BY-SA 4.0).

Need it done for your business? UphillTech.