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

Answered
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 = query.id
  const name = query.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.

this.props.id
this.props.name

Note that each query parameter will be a string.

1 reply
coderguy on Dec 7, 2021

Thanks!

Answered