Skip to content
Advertisement

How to get query parameters in _app?

My environment: React.js + Next.js

I need query parameters in app.jsx.

When I wrote

console.log(1);
console.log(router); //(= useRouter import from next/router)
console.log(2);
console.log(Router); //(= Router import from next/router)

Chrome console prints queries well, but on terminal the query is empty.

1
ServerRouter {
  route: '/',
  pathname: '/',
  query: {},
  asPath: '/',
  basePath: '',
  events: undefined,
  isFallback: false,
  locale: undefined,
  isReady: false,
  locales: undefined,
  defaultLocale: undefined,
  domainLocales: undefined
}
2
{
  router: null,
  readyCallbacks: [],
  ready: [Function: ready],
  push: [Function (anonymous)],
  replace: [Function (anonymous)],
  reload: [Function (anonymous)],
  back: [Function (anonymous)],
  prefetch: [Function (anonymous)],
  beforePopState: [Function (anonymous)]
}

Is there any way to get query in app.jsx?

Advertisement

Answer

Well you can use useRouter to get the query parameters. The query parameters are available only when you making a request to the Next.js server.

If you are using a Next.js server and you want to build the page based on the query params you can do that on the server side. But if you are using static files the query will always be empty on th first render due tu Next.js doing pre-render of a page.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement