Next.js部署Vercel后Header组件读取JSON文件报ENOENT错误

问题根源 #

1. 客户端组件的运行环境限制：带"use client"的组件最终会在浏览器环境执行，而fs.readFile是Node.js专属API，浏览器环境没有这个模块。本地开发时Next.js开发服务器可能在预渲染阶段帮你在服务器端执行了这段逻辑，所以没报错；但部署到Vercel后，客户端组件在浏览器端运行时，要么找不到fs模块，要么文件路径解析错误，触发ENOENT。
2. RootLayout与页面组件的执行差异：单个页面组件默认是服务器组件（除非手动加"use client"），fs.readFile在服务器端执行，能正确访问服务器文件系统，路径解析也正常。但RootLayout中引入的Header是客户端组件，运行环境切换到浏览器，导致文件读取失败。

解决方案 #

方案1：将Header改为服务器组件（移除"use client"） #

如果Header不需要客户端交互逻辑（比如点击、状态管理等），直接去掉"use client"指令，让它成为服务器组件，这样fs.readFile始终在服务器端执行，本地和Vercel部署都能正常读取文件。

示例代码：

// app/components/HeaderComponent.js
import fs from 'fs';
import path from 'path';

export default async function HeaderComponent() {
  // 用绝对路径构建文件地址，避免环境差异导致的路径错误
  const filePath = path.join(process.cwd(), 'public/locales/zh-CN/header-content.json');
  const content = await fs.readFile(filePath, 'utf8');
  const headerData = JSON.parse(content);

  return (
    <header>
      <nav>
        {headerData.navItems.map(item => (
          <a key={item.id} href={item.href}>{item.label}</a>
        ))}
      </nav>
    </header>
  );
}

方案2：服务器组件读数据，传给客户端组件当props #

如果Header必须是客户端组件（比如需要处理交互逻辑），把文件读取逻辑放到父级的RootLayout（默认是服务器组件）中，读取完成后将数据作为props传给Header。

示例代码：

// app/layout.js（RootLayout，默认服务器组件）
import fs from 'fs';
import path from 'path';
import HeaderComponent from './components/HeaderComponent';

export default async function RootLayout({ children }) {
  // 服务器端读取文件
  const filePath = path.join(process.cwd(), 'public/locales/zh-CN/header-content.json');
  const content = await fs.readFile(filePath, 'utf8');
  const headerData = JSON.parse(content);

  return (
    <html lang="zh-CN">
      <body>
        <HeaderComponent headerData={headerData} />
        {children}
      </body>
    </html>
  );
}

// app/components/HeaderComponent.js（客户端组件）
"use client";

export default function HeaderComponent({ headerData }) {
  // 直接使用传入的props，无需再读取文件
  return (
    <header>
      <nav>
        {headerData.navItems.map(item => (
          <a key={item.id} href={item.href}>{item.label}</a>
        ))}
      </nav>
    </header>
  );
}

方案3：客户端用fetch读取公共目录文件（多语言场景推荐） #

如果是多语言需求，把语言文件放到public目录下，客户端组件用fetch请求读取，避免直接操作文件系统。

示例代码：

// app/components/HeaderComponent.js（客户端组件）
"use client";
import { useEffect, useState } from 'react';

export default function HeaderComponent() {
  const [headerData, setHeaderData] = useState(null);
  const lang = 'zh-CN'; // 可从路由或上下文获取当前语言

  useEffect(() => {
    const fetchHeaderData = async () => {
      const res = await fetch(`/locales/${lang}/header-content.json`);
      const data = await res.json();
      setHeaderData(data);
    };
    fetchHeaderData();
  }, [lang]);

  if (!headerData) return <div>Loading...</div>;

  return (
    <header>
      <nav>
        {headerData.navItems.map(item => (
          <a key={item.id} href={item.href}>{item.label}</a>
        ))}
      </nav>
    </header>
  );
}

关键注意点 #

• 永远记住：客户端组件不能使用Node.js API，只能用浏览器支持的API；服务器组件可自由使用Node.js API，因为它们在服务器端执行。
• 读取文件时必须用绝对路径，通过path.join(process.cwd(), '文件路径')构建，避免相对路径在不同环境下的解析差异。
• 多语言场景优先使用官方推荐的国际化方案，减少手动处理文件的复杂度。

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