SyntaxFix

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

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}
}

Examples related to next.js

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

Examples related to query-string

• How can I get (query string) parameters from the URL in Next.js? • How to read values from the querystring with ASP.NET Core? • What is the difference between URL parameters and query strings? • How to get URL parameter using jQuery or plain JavaScript? • How to access the GET parameters after "?" in Express? • node.js http 'get' request with query string parameters • Escaping ampersand in URL • In Go's http package, how do I get the query string on a POST request? • Append values to query string • Node.js: Difference between req.query[] and req.params