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

Question

When I click on a link in my /index.js, it brings me to /about.js page.

However, when I'm passing parameter name through 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>
);

Answer 1

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);    ... } 

Answer 2

Using Next.js 9 or above you can get query parameters:

With router:

import { useRouter } from 'next/router'  const Index = () => {   const router = useRouter()   const {id} = router.query    return(<div>{id}</div>) } 

With getInitialProps:

const Index = ({id}) => {   return(<div>{id}</div>) }  Index.getInitialProps = async ({ query }) => {   const {id} = query    return {id} } 

Answer 3

url prop is deprecated as of Next.js version 6: https://github.com/zeit/next.js/blob/master/errors/url-deprecated.md

To get the query parameters, use getInitialProps:

For stateless components

import Link from 'next/link'
const About = ({query}) => (
  <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>
)

About.getInitialProps = ({query}) => {
  return {query}
}

export default About;

For regular components

class About extends React.Component {

  static getInitialProps({query}) {
    return {query}
  }

  render() {
    console.log(this.props.query) // The query is available in the props object
    return <div>Click <Link href={{ pathname: 'about', query: { name: 'leangchhean' }}}><a>here</a></Link> to read more</div>

  }
}

The query object will be like: url.com?a=1&b=2&c=3 becomes: {a:1, b:2, c:3}