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.