next-i18next无法从CMS接口读取语言JSON文件问题求助

问题分析 #

从你的配置和调试信息来看，核心问题集中在以下几点：

• 后端插件未正确注册：调试信息里use字段显示[null]，说明i18next-http-backend没被正常加载，原因是配置中的isBrowser变量未定义，导致环境判断逻辑失效。
• 请求模式限制：backend.requestOptions.mode设为no-cors，这种模式下浏览器会屏蔽响应内容，i18next根本无法读取CMS返回的JSON数据。
• 资源加载失败：调试信息里resources下的translation全是空对象，证明语言包完全没被获取到。

解决方案 #

1. 修复后端插件注册逻辑 #

在next-i18next.config.js中补充isBrowser的定义，或者直接用typeof window !== 'undefined'判断环境，确保浏览器端能正确加载后端插件：

const I18NextHttpBackend = require('i18next-http-backend/cjs');
const isBrowser = typeof window !== 'undefined'; // 新增这行定义

module.exports = {
  debug: process.env.NODE_ENV === 'development',
  reloadOnPrerender: process.env.NODE_ENV === 'development',
  i18n: {
    defaultLocale: 'es',
    locales: ['es'],
    localeDetection: false,
  },
  ns: ['translation'],
  defaultNS: 'translation',
  react: {
    useSuspense: true,
  },
  backend: {
    loadPath: 'http://localhost:3001/locales/{{lng}}/{{ns}}.json',
    requestOptions: {
      cache: 'default',
      credentials: 'same-origin',
      // 移除mode: 'no-cors'，或改为mode: 'cors'
    },
  },
  serializeConfig: false,
  use: isBrowser ? [I18NextHttpBackend] : [],
};

2. 调整请求模式并配置跨域 #

no-cors模式会阻断响应内容读取，必须移除该配置。如果CMS和Next.js项目不在同一域名下，需要在CMS服务端配置CORS允许跨域，添加响应头：

Access-Control-Allow-Origin: http://localhost:3000  // 你的Next.js项目地址
Access-Control-Allow-Methods: GET

3. 验证请求与响应 #

• 打开浏览器开发者工具的Network面板，过滤XHR请求，确认是否有向http://localhost:3001/locales/es/translation.json发送的请求。
• 检查请求状态码是否为200，响应内容是否是预期的{"title": "My title"}。
• 查看控制台的debug日志（已开启debug: true），排查是否有加载失败的错误提示。

4. 预渲染场景的额外处理 #

如果页面使用SSG/SSR，需要确保预渲染时也能加载语言包。可以调整reloadOnPrerender的逻辑，或者在getStaticProps/getServerSideProps中手动初始化i18next并加载资源。

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