NextJS设置localeDetection为false后切换语言仍跳转对应域名如何解决

根因说明 #

localeDetection: false 仅用于禁用 Next.js 首次访问时自动根据浏览器语言、Cookie 等信息识别用户 locale 并重定向的逻辑，和手动切换语言时的域名跳转行为无关。
你配置了 domains 数组后，Next.js i18n 域名路由的默认设计就是每个 locale 与对应域名绑定，只要你切换到对应 locale，就会自动跳转到该 locale 绑定的域名，这是预期行为。

解决方案 #

• 方案1：如果你不需要多域名部署，仅需要通过路径前缀区分多语言（比如 my-domain.com/fr 访问法语页面），直接删除 next-i18next.config.js 中的整个 domains 配置项即可，后续切换语言只会修改路径前缀，不会触发域名跳转。
• 方案2：如果需要保留多域名部署能力，同时允许在单个域名下切换所有语言，可以修改切换语言的逻辑，禁用自动域名跳转：
  如果你使用 useRouter 切换语言，调用时添加 locale: false 参数，手动拼接语言前缀：

  const router = useRouter()
  // 切换为法语的示例
  router.push(`/fr${router.asPath}`, undefined, { locale: false })
  

  如果你使用 next-i18next 自带的 changeLanguage 方法，可以自定义跳转逻辑：

  import { useRouter } from 'next/router'
  import { useTranslation } from 'next-i18next'
  
  const { i18n } = useTranslation()
  const router = useRouter()
  
  const handleChangeLocale = (newLocale) => {
    i18n.changeLanguage(newLocale, () => {
      router.push(`/${newLocale}${router.asPath}`, undefined, { locale: false })
    })
  }
  

• 方案3：如果你使用 Next.js 13+ App Router，还可以在 next.config.js 中添加 skipMiddlewareUrlNormalize: true 配置，禁用中间件对 locale 跳转的默认处理，后续自行处理路径的 locale 匹配逻辑即可。

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