useRouter/withRouter receive undefined on query in first render

Question

I got a problem with my dynamic route. It look like this

[lang]/abc

I am trying to get query value from [lang] but when I using useRouter/withRouter i got query during 2-3 render of page ( on first i got query.lang = undefined ). its possible to get in 1 render or use any technique ?

Answer 1

I found something:

isReady: boolean - Whether the router fields are updated client-side and ready for use. Should only be used inside of useEffect methods and not for conditionally rendering on the server. https://nextjs.org/docs/api-reference/next/router#router-object

And the code would be like:

const router = useRouter();
useEffect(()=>{
    if(!router.isReady) return;

    // codes using router.query

}, [router.isReady]);

Answer 2

It isn't possible to get a query value at the first render.

Statically optimized pages are hydrated without provided route parameters. E.g. query is an empty object ({}).

After hydration, Next.js will fill the query object.

Next.js 10.0.5 and up

Use router.isReady inside useEffect hook to check if params are ready. See the answer by @doxylee for the example.

Before Next.js 10.0.5

At first render of a dynamic route router.asPath and router.route are equal. Once query object is available, router.asPath reflects it.

You can rely on the query value within a useEffect hook after asPath has been changed.

const router = useRouter();

useEffect(() => {
  if (router.asPath !== router.route) {
    // router.query.lang is defined
  }
}, [router])

GitHub Issue - Add a "ready" to Router returned by "useRouter"