Next.js 14中process.cwd()开发与生产环境路径差异问题

问题根源 #

Vercel部署时，静态页面（如首页）在构建阶段执行文件读取，此时process.cwd()指向项目根目录，所以能正常读取；而下层页面如果是请求时动态渲染（比如带动态路由的页面、未标记为静态生成的页面），运行环境切换到.next/server目录，依赖process.cwd()的路径就会失效。

解决方案：用模块自身目录构建绝对路径 #

不要依赖process.cwd()，改用当前模块的目录来定位meta.md，这样无论构建还是运行阶段，路径都准确。

方法1：使用__dirname（CommonJS或配置后的ES模块）

如果你的页面是CommonJS格式，或者在tsconfig.json中配置了moduleResolution: "node"，可以直接用：

import fs from 'fs/promises';
import path from 'path';

export async function getMeta() {
  // 基于当前page.tsx所在目录，找到同级的meta.md
  const metaPath = path.join(__dirname, 'meta.md');
  const content = await fs.readFile(metaPath, 'utf8');
  return content;
}

方法2：ES模块兼容方案（import.meta.url）

如果使用纯ES模块，需要通过fileURLToPath转换模块路径：

import fs from 'fs/promises';
import { fileURLToPath } from 'url';
import { dirname, join } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

export async function getMeta() {
  const metaPath = join(__dirname, 'meta.md');
  const content = await fs.readFile(metaPath, 'utf8');
  return content;
}

额外注意事项 #

• 确保读取逻辑在Server Components中执行，Next.js禁止在Client Components中使用fs模块。
• 若需调试路径，可以临时在代码中添加console.log(metaPath)，部署后查看Vercel的函数日志，确认路径是否正确。

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