How to get the locale value from URL in Next Js

Question

In Next Js application, I am using next-i18next module for multi language support. It is working fine.

Code of NabBar component:

const NavBar = ({...props}) => {
  const router = useRouter()
  const { t } = useTranslation('navbar');


  const onChangeLanguage = (lang) => (e)=> {
    e.preventDefault()
    if(lang === 'ar') {
        router.push('ar')
    } else {
        router.push('/')
    }
  }

  .....
  <input type="radio" onClick={onChangeLanguage('en')} />
  <label >English</label>
  &nbsp;
  <Input type="radio" onClick={onChangeLanguage('ar')} />
  <label >Arabic</label>


  
}

export default NavBar;

on click of Arabic, it is applying /ar after the domain. e.g. http://localhost:3000/ar

But now I want to show the selected radio button in all the pages. Can anyone suggest that how can I display checked radio button corresponding to the selected language.

Answer 1

You can get current active locale from router. It is available at router.locale

And then you would simply check if checkbox id is matching active locale