NextJS i18n组件报错：无法解析'fs'模块问题求助

AI 小北

2026-7-9

问题解决：Next.js组件中使用next-i18next出现"Can't resolve 'fs'"错误

问题根源

Next.js的getServerSideProps/getStaticProps仅支持pages目录下的页面文件，组件中直接调用这些方法会触发客户端打包流程——而serverSideTranslations依赖Node.js的fs模块读取本地翻译文件，浏览器环境不存在fs，因此报错。

解决方案

核心思路：页面级完成服务端翻译逻辑，组件通过上下文或props复用翻译数据，既保证SSG/SSR渲染（SEO友好），又避免客户端打包时引入fs。

方案1：页面传递翻译函数给组件

在页面的getStaticProps/getServerSideProps中完成serverSideTranslations调用，将翻译函数t传递给Navbar组件：

// pages/index.js
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import Navbar from '../components/navbar';

export default function Home({ t }) {
  return (
    <>
      <Navbar t={t} />
      {/* 页面其他内容 */}
    </>
  );
}

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common'])), // 加载对应语言的翻译文件
    },
  };
}

// components/navbar.js
export default function Navbar({ t }) {
  return (
    <nav>
      <a href="/">{t('navbar.home')}</a>
      <a href="/about">{t('navbar.about')}</a>
    </nav>
  );
}

方案2：组件直接使用`useTranslation`钩子

只要页面已经通过serverSideTranslations加载了翻译数据，组件可以直接用useTranslation复用上下文，服务端渲染时会自动输出翻译后的文本，不影响SEO：

// components/navbar.js
import { useTranslation } from 'next-i18next';

export default function Navbar() {
  const { t } = useTranslation('common');
  return (
    <nav>
      <a href="/">{t('navbar.home')}</a>
      <a href="/about">{t('navbar.about')}</a>
    </nav>
  );
}