Next.js 14项目i18next嵌套翻译失效问题求助

核心问题定位 #

你的配置中设置了keySeparator: false，这个参数会禁用嵌套键的点分隔解析逻辑。当调用t("components.navbar.navbarlist.home")时，i18next会把整个字符串当作单个独立键匹配，而非拆分为components > navbar > navbarlist > home的嵌套结构，这是翻译无法解析的直接原因。

需要补充的信息 #

• 本地化文件结构：比如public/locales/en/common.json的具体内容，确认嵌套键是否按预期定义
• resources变量的代码：配置中传入了resources，需确认它是否与HttpApi加载的文件存在冲突
• languages变量的值：检查它是否和supportedLngs的数组内容一致
• 组件中使用t函数的代码：确认是否正确调用useTranslation hook，以及是否指定了正确的namespace（比如common）

具体解决步骤 #

1. 修正keySeparator配置
   将配置中的keySeparator: false改为keySeparator: "."（这是i18next默认值，也可直接删除该行使用默认配置）：

   keySeparator: ".", // 启用点分隔的嵌套键解析
   

2. 确认本地化文件结构
   确保en/common.json中的键为嵌套结构，示例如下：

   {
     "components": {
       "navbar": {
         "navbarlist": {
           "home": "Home"
         }
       }
     }
   }
   

3. 修正静态资源加载路径
   Next.js的public目录是静态资源根目录，HttpApi的loadPath应直接指向/locales/开头的路径，而非相对路径：

   backend: {
     loadPath: "/locales/{{lng}}/common.json",
     crossDomain: true,
   },
   

4. 检查namespace匹配
   如果本地化文件属于common namespace，确保调用t函数时正确指定：

   • 方式1：在useTranslation中指定namespace

     const { t } = useTranslation("common");
     

   • 方式2：在t函数中显式传入namespace参数

     t("components.navbar.navbarlist.home", { ns: "common" });
     

5. 开启debug模式排查
   将debug: true打开，查看浏览器控制台日志，确认本地化文件是否成功加载，以及目标键是否存在于加载的资源中。

6. 清理resources与HttpApi的冲突
   若同时配置了resources和HttpApi，可能导致资源覆盖。建议只保留一种加载方式：要么通过resources直接注入翻译内容，要么通过HttpApi从静态文件加载。

内容的提问来源于stack exchange，提问作者MHD Firass Barakat