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

Answer 1

I resolved my problem that I need it in Hoc component. I wrapped using withRouter(withLocale(Comp)) and create conditional in HOC

export default function withLocale(WrappedPage) {
    const WithLocale = ({ router, ...props }) => {
        const { lang } = router.query;
        if (!lang || !isLocale(lang)) {
            return ;
        }
        return (
            
                
            
        );
    };
   return WithLocale;
}