title: How do I route with query string params in Next.js?
body: <p>I have a URL like</p>
  <blockquote>
  <p>bar?id=foo</p>
  </blockquote>
  <p>If I route to this via <code>router.push('bar?id=foo')</code> everything works fine.</p>
  <p>But if I go direct to the route in the browser, the query string does not get passed through.</p>
  <pre><code>const BarComponent = ()=&gt;{
      console.log(useRouter())
  }
  </code></pre>
  <p>This outputs</p>
  <pre><code>ServerRouter {
    route: '/bar',
    pathname: '/bar',
    query: {},
    asPath: '/bar',
    basePath: '',
    events: undefined,
    isFallback: false,
    locale: undefined,
    isReady: false,
    locales: undefined,
    defaultLocale: undefined,
    domainLocales: undefined,
    isPreview: false,
    isLocaleDomain: false
  }
  </code></pre>