Can I check query at app.jsx using next.js?



my environment: React.js + Next.js

I need query parameters on 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 – 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 on app.jsx?

Thanks a lot

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.



Source: stackoverflow