使用next-i18next切换语言时遭遇CORS问题求助

看起来你在使用next-i18next切换语言时碰到了CORS问题，我来帮你排查下可能的原因和对应的解决办法：

1. 检查localePath配置的资源路径 #

你的localePath设置为/app/static/locales，但在Next.js的App Router结构中，静态资源（比如翻译文件）应该放在**public目录**下，而不是app/static目录。next-i18next默认会从public/locales加载翻译文件，如果路径配置错误，可能会导致请求指向了错误的资源地址，进而触发CORS（尤其是部署后资源路径不匹配的情况）。

修改方案： #

• 把你的locales文件夹移动到项目根目录的public文件夹下，目录结构应该是这样：

  public/
    locales/
      en/
        common.json  # 你的英文翻译文件
      tr/
        common.json  # 你的土耳其语翻译文件
  

• 然后修改i18n配置，要么直接移除localePath（默认就是public/locales），要么明确设置为正确路径：

  export default new NextI18Next({
    // ...其他配置
    // 移除或者修改为正确路径
    localePath: 'public/locales',
    // ...其他配置
  });
  

2. 修正语言切换函数的调用方式 #

你当前的切换函数写的是i18n.i18n.changeLanguage(lng)，这里重复调用了i18n实例——你导出的是NextI18Next的实例，直接调用i18n.changeLanguage(lng)即可，嵌套的i18n可能导致不必要的请求错误。

修改后的函数： #

const changeLang = lng => {
  // 直接调用实例的changeLanguage方法
  i18n.changeLanguage(lng);
};

按钮部分可以保持不变：

<button onClick={() => changeLang('en')} className="en"> EN </button>
<button onClick={() => changeLang('tr')} className="tr"> TR </button>

3. 额外排查点 #

如果修改后还是有CORS问题，可以打开浏览器控制台的网络面板，查看翻译文件的请求URL：

• 如果请求的是外部域名地址，那大概率是路径配置错误导致的；
• 如果是本地开发环境，确保开发服务器重启过，让新的资源路径生效；
• 生产环境部署时，检查平台（比如Vercel、Netlify）是否允许访问public/locales下的静态文件，一般默认是允许的，但如果有自定义的路由规则需要调整。

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