Next.js中如何从URL获取locale值并对应选中语言切换单选框

实现方法 #

你可以直接使用Next.js路由内置的locale属性完成需求，next-i18next会自动将当前激活的语言同步到useRouter()返回的实例中，不需要手动解析URL路径。
具体修改点如下：

• 给单选框添加统一name属性保证互斥
• 为每个单选框绑定checked属性，判断当前router.locale是否匹配对应语言
• （可选优化）切换语言的逻辑可以不用硬编码跳转路径，修改后可支持在任意页面切换语言时保留当前页面路径
  修改后的完整代码如下：

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

  const onChangeLanguage = (lang) => (e)=> {
    e.preventDefault()
    // 优化后的切换逻辑：保留当前页面路径，仅修改语言前缀
    router.push(router.asPath, router.asPath, { locale: lang })
  }

  return (
    <>
      <input 
        type="radio" 
        name="lang-switch" 
        checked={router.locale === 'en'} 
        onClick={onChangeLanguage('en')} 
      />
      <label>English</label>
      &nbsp;
      <input 
        type="radio" 
        name="lang-switch" 
        checked={router.locale === 'ar'} 
        onClick={onChangeLanguage('ar')} 
      />
      <label>Arabic</label>
    </>
  )
}

export default NavBar;

如果你的next-i18next配置了默认语言不带前缀，router.locale依然会正确返回当前激活的语言标识，无需额外适配。

内容的提问来源于stack exchange，提问作者Deep Kakkar