Get the URL query string data for a page in Next.js?

coderguy asked this question 5 months ago
coderguy on Dec 3, 2021

The URL for the page contains data like: ?id=123&name=billy-bob.

How do I grab those values from the URL and make them available to the page via the this.props object? This should be done in the getInitialProps() function, right?

1 suggested answers
1 reply
nick on Dec 4, 2021

You can do this quite easily with built-in Next.js tools.

Here's what your getInitialProps() function can look like:

static async getInitialProps ({ query }) {
  const id =
  const name =

  return {
    id: id,
    name: name

The query object will contain each query string parameter from the URL.

  id: "123,
  name: "billy-bob

And each of those values will be available in your page via the this.props object.

Note that each query parameter will be a string.

1 reply
coderguy on Dec 7, 2021