Yarn 2 Monorepo中Next.js与组件工作区共享i18next翻译问题

针对你在Yarn 2 Monorepo下遇到的/components无法正常使用useTranslation的问题，以下是具体解决思路：

1. 统一依赖版本并正确配置peerDependencies #

在/components的package.json中，将i18next和react-i18next设为peerDependency，同时在根目录的package.json中添加resolutions强制所有工作区使用同一版本，避免多实例冲突：

// /components/package.json
{
  "peerDependencies": {
    "i18next": "^23.0.0",
    "react-i18next": "^13.0.0"
  }
}

// 根目录package.json
{
  "resolutions": {
    "i18next": "^23.0.0",
    "react-i18next": "^13.0.0"
  }
}

执行yarn install让依赖生效，这样既满足peerDependency的要求，又确保所有工作区共享同一个依赖实例。

2. 共享全局i18n实例 #

将i18n的初始化逻辑放在/constants工作区，导出统一的i18n实例，让/app和/components都导入这个实例：

// /constants/i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import translationEN from './locales/en.json';
import translationZH from './locales/zh.json';

const resources = {
  en: { translation: translationEN },
  zh: { translation: translationZH }
};

i18n.use(initReactI18next).init({
  resources,
  lng: 'zh',
  interpolation: { escapeValue: false }
});

export default i18n;

然后在/app的_app.tsx中导入该实例，并确保I18nextProvider使用这个全局实例：

// /app/pages/_app.tsx
import { I18nextProvider } from 'react-i18next';
import i18n from '../../constants/i18n';

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

export default MyApp;

/components中的组件直接导入useTranslation即可，无需额外配置：

// /components/Button.js
import { useTranslation } from 'react-i18next';

export default function Button() {
  const { t } = useTranslation();
  return <button>{t('common.submit')}</button>;
}

3. 配置Next.js的模块解析 #

在/app的next.config.js中添加transpilePackages，确保Next.js能正确解析/components工作区的代码：

// /app/next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ['components'],
  // 其他配置...
};

module.exports = nextConfig;

4. 检查Yarn 2的PnP配置 #

如果使用Yarn 2的PnP模式（默认），确保.yarnrc.yml中的nodeLinker设置正确，避免模块解析异常：

# .yarnrc.yml
nodeLinker: pnp

若仍有模块找不到的问题，可以尝试临时切换到node-modules模式验证：

nodeLinker: node-modules

关键注意事项 #

• 避免在/components中单独初始化i18n实例，必须共享全局实例才能让上下文生效
• peerDependency配合resolutions是Monorepo中共享依赖的标准做法，能避免版本冲突
• Next.js需要显式配置transpilePackages来处理工作区中的组件代码

内容的提问来源于stack exchange，提问作者reactive-core