Why is my nextjs router not return query params?

Question

When I navigate to http://localhost:3000/users/123?foo=bar of my nextjs app I get the following when I print out router.query

{id: "123"}

What could be the reasons it is not adding foo: 'bar' to the query object?

Answer 1

Your file layout should look like this:

pages/
  users/
   [id].js

Having just tested this, the returned query object is {"foo":"bar","id":"123"}.

Answer 2

I had to add a next.config.js file with the following

module.exports = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/pages/:slug*',
        destination: '/:slug*'
      }
    ]
  }
}