Next.js中i18n语言切换路由重复问题的解决方法

我用next-i18n实现了通过URL语言前缀切换页面语言的功能，代码如下：

const [languages, ] = React.useState([{
  language: 'Polish',
  prefix: 'pl'
}, {
  language: 'Russian',
  prefix: 'ru'
}, {
  language: 'English',
  prefix: 'en'
}]);

const changeLanguage = async (language: string) => {
  for (const lang of languages) {
    if (lang.language === language) {
      setPickedLanguage(lang.flag);
      await router.push(lang.prefix);
    }
  }
};

但多次切换语言后，URL会出现/pl/en这类重复前缀的情况，我希望始终保持单一语言前缀（如/en、/pl、/ru），该如何解决？

解决方法 #

问题根源是调用router.push(lang.prefix)时用了相对路径，每次切换会在当前URL基础上追加前缀，导致重复。可以通过以下方式修复：

1. 使用绝对路径跳转

直接在语言前缀前添加根路径符号/，确保每次从根目录开始跳转：

const changeLanguage = async (language: string) => {
  for (const lang of languages) {
    if (lang.language === language) {
      setPickedLanguage(lang.flag);
      // 改为绝对路径
      await router.push(`/${lang.prefix}`);
    }
  }
};

2. 保留当前页面路径，仅替换语言前缀

如果想切换语言时停留在当前页面（比如从/pl/about切换到/en/about），可以解析当前URL并替换已有前缀：

const changeLanguage = async (language: string) => {
  // 生成支持的语言前缀正则
  const langPrefixRegex = new RegExp(`^/(?:${languages.map(l => l.prefix).join('|')})`);
  for (const lang of languages) {
    if (lang.language === language) {
      setPickedLanguage(lang.flag);
      // 移除当前路径中的旧语言前缀
      const currentPath = router.asPath.replace(langPrefixRegex, '');
      // 拼接新前缀和当前路径
      await router.push(`/${lang.prefix}${currentPath}`);
    }
  }
};

3. 利用next-i18n内置方法处理

如果你使用的是next-i18next库，可直接用内置的changeLanguage方法自动管理URL前缀：

import { useTranslation } from 'next-i18next';

const { i18n } = useTranslation();

const changeLanguage = async (language: string) => {
  const targetLang = languages.find(l => l.language === language);
  if (targetLang) {
    setPickedLanguage(targetLang.flag);
    await i18n.changeLanguage(targetLang.prefix);
  }
};

注意：使用此方法需确保next-i18next配置中开启了localePath、localeStructure等相关设置，让库自动处理URL前缀逻辑。

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