How do I route with query string params in Next.js?

Question

I have a URL like

bar?id=foo

If I route to this via router.push('bar?id=foo') everything works fine.

But if I go direct to the route in the browser, the query string does not get passed through.

const BarComponent = ()=>{
    console.log(useRouter())
}

This outputs

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
}

juliomalves · Accepted Answer · 2021-09-18 22:27:42Z

3

That's the output you get on the terminal from the server, and shows its default value ({}). On the client, you should see 2 console logs: first one with an empty query object (from SSR) and a second one with your query string in it (from rehydration).

useRouter() is a React Hook so it'll only run/update on the client.

If you want to have access to the query string on the server-side, you'll need to use getServerSideProps and access it through the query param from the context object.

export async function getServerSideProps({ query }) {
    console.log(query) // `{ id: 'foo' }`
    //...
}

edited Sep 18, 2021 at 22:27

answered Mar 26, 2021 at 18:23

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan Over a year ago

Abit of a rookie question I guess :(

juliomalves Over a year ago

Valid question, and often times generates confusion.

Collectives™ on Stack Overflow

How do I route with query string params in Next.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related