1

In my application I'm using nextjs and I'm transition my app from static to SSR. On my custom App I introduced the getInitialProps function and I noticed that when I use getInitialProps function, my property isReady from the hook useRouter() is always true and the query object is empty when I have query parameters on the url.

Example:

const App = ({ Component, pageProps }: AppProps): JSX.Element => {   
   const router = useRouter()
   
 useEffect(() => {
    console.log('App route: ')
    console.log(router)
    console.log(router.isReady)
    console.log(router.query)

  }, [router])

 return ({router.isReady && <Component {...pageProps}/>})
  
}

On this scenario, what happens is that the query params "appear" later, and the console logs are printed twice due the later hydration (what makes sense). But shouldn't the isReady flag be false? on the first console? after the hydration?

immags
  • 11
  • 1
  • 2
  • Yes, that is a bug which I've also noticed with nextjs. As a workaround, You can pass the query params from getInitialProps to the App. Inside getIntialProps you get a `ctx` parameter. the query params are inside `ctx.query`. You can add query params to pageProps – Inder Apr 27 '22 at 16:06
  • @Inder I saw some opened bugs related with that, but no answers :( But thank you so much, I will try that out. – immags Apr 28 '22 at 15:31
  • Let me know if you need help with that. – Inder Apr 28 '22 at 15:34

0 Answers0