next-i18next翻译在Storybook中不生效且报missingKey错误

核心原因 #

你当前的 .storybook/i18n.js 仅完成了i18n基础初始化，没有配置翻译资源的加载逻辑，i18next无法获取到翻译内容，因此抛出missingKey警告。

修复方案 #

方案1：预导入本地翻译资源（无需额外依赖，推荐） #

直接将项目中的翻译文件导入到Storybook的i18n配置中，适配不需要在Storybook内动态切换语言的场景：

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
// 按你项目实际翻译文件路径调整导入
import deEditor from '../public/locales/de/editor.json';
import deCommon from '../public/locales/de/common.json';
// 其他语言翻译文件同理导入

i18n.use(initReactI18next).init({
  fallbackLng: 'de',
  debug: true,
  // 新增翻译资源配置
  resources: {
    de: {
      editor: deEditor,
      common: deCommon
      // 其他命名空间对应补充
    }
    // 其他语言对应补充
  },
  // 与项目next-i18next配置保持一致
  defaultNS: 'common',
  ns: ['common', 'editor'] // 所有用到的命名空间都要在此声明
});

export default i18n;

修改完成后重启Storybook即可生效。

方案2：HTTP后端加载翻译（支持动态切换语言） #

如果需要在Storybook中切换语言，可通过i18n后端插件加载静态资源目录下的翻译文件：

1. 安装依赖：

npm install i18next-http-backend --save-dev

2. 修改 .storybook/i18n.js 配置：

// .storybook/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    fallbackLng: 'de',
    debug: true,
    backend: {
      // 翻译文件路径与next-i18next配置保持一致
      loadPath: '/locales/{{lng}}/{{ns}}.json'
    },
    defaultNS: 'common',
    ns: ['common', 'editor'],
    react: {
      // 关闭Suspense避免Storybook渲染报错
      useSuspense: false
    }
  });

export default i18n;

你启动脚本中已经通过-s ./public将public目录设为静态资源目录，配置完成后重启Storybook即可正常加载翻译文件。

额外排查点 #

• 确认组件中调用useTranslation时指定的命名空间，与i18n配置中ns数组声明的命名空间完全匹配
• 确认Storybook的i18n配置（默认语言、命名空间、翻译路径）与项目next-i18next的配置完全一致

内容的提问来源于stack exchange，提问作者Mähnenwolf