Next.js中跨包嵌套组件访问react-i18n实例的最优方案

核心问题分析 #

外部包组件调用useTranslation返回空i18n实例，大概率是两个原因：

1. 外部包将react-i18next作为直接依赖而非peerDependency，导致项目中存在两个独立的react-i18next实例，上下文无法共享；
2. 外部包组件未被主应用的I18nextProvider正确包裹。

方案1：统一依赖版本（最优解） #

调整外部包的package.json，将react-i18next和i18next设为peerDependencies，确保外部包复用主应用的依赖实例：

// 外部包的package.json
{
  "peerDependencies": {
    "react-i18next": "^13.0.0",
    "i18next": "^22.0.0",
    "react": "^18.0.0"
  },
  "devDependencies": {
    "react-i18next": "^13.0.0",
    "i18next": "^22.0.0",
    "react": "^18.0.0"
  }
}

之后在主应用中重新安装依赖，确保外部包使用主应用的react-i18next实例。此时外部包组件直接调用useTranslation就能正常获取上下文的i18n实例，无需额外传参。

方案2：全局注入i18n实例 #

如果无法修改外部包的依赖配置，可以在主应用初始化i18n后，将实例导出为全局可访问的模块，外部包直接导入使用：

主应用中导出i18n实例 #

// src/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import enTranslations from './locales/en.json';
import zhTranslations from './locales/zh.json';

i18n.use(initReactI18next).init({
  resources: {
    en: { translation: enTranslations },
    zh: { translation: zhTranslations }
  },
  lng: 'zh',
  fallbackLng: 'en',
  interpolation: { escapeValue: false }
});

export default i18n;

外部包组件中直接导入使用 #

// 外部包的ComponentInDifferentPackage.jsx
import i18n from '../path/to/main/app/i18n'; // 可通过webpack别名简化路径

const ComponentInDifferentPackage = () => {
  const t = i18n.t;
  return <div>{t('hello')}</div>;
};

export default ComponentInDifferentPackage;

注意：Next.js SSR场景下，需确保i18n实例的初始化逻辑在服务端和客户端保持一致，避免hydration不匹配问题。

方案3：自定义Context传递i18n实例 #

如果上述方案都无法实施，可以在主应用中创建自定义Context，将i18n实例注入，外部包组件通过自定义Context获取实例：

主应用创建自定义Context #

// src/contexts/I18nContext.jsx
import { createContext, useContext } from 'react';
import i18n from '../i18n';

const I18nContext = createContext(i18n);

export const I18nProvider = I18nContext.Provider;
export const useI18n = () => useContext(I18nContext);

主应用根组件包裹 #

// src/pages/_app.jsx
import { I18nProvider } from '../contexts/I18nContext';
import i18n from '../i18n';

function MyApp({ Component, pageProps }) {
  return (
    <I18nProvider value={i18n}>
      <Component {...pageProps} />
    </I18nProvider>
  );
}

export default MyApp;

外部包组件使用自定义Hook获取实例 #

// 外部包的ComponentInDifferentPackage.jsx
import { useI18n } from '../path/to/main/app/contexts/I18nContext';

const ComponentInDifferentPackage = () => {
  const i18n = useI18n();
  return <div>{i18n.t('hello')}</div>;
};

export default ComponentInDifferentPackage;

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