如何解决Next.js中getServerSideProps()访问文件的服务器报错问题？

问题原因 #

部署后出现ENOENT错误主要有两个核心原因：

1. 路径计算错误：本地环境中process.cwd()指向项目根目录，但在远程部署环境（如Vercel、Netlify）中，process.cwd()可能指向服务器的临时工作目录（而非你的项目源码目录），导致路径拼接失效。
2. 文件未被打包到部署包：部分部署平台默认只会打包构建必要的文件，如果你的Markdown目录不在Next.js默认的打包范围内，会导致文件缺失。

解决方案 #

1. 使用可靠的路径计算方式 #

放弃process.cwd()，改用__dirname（CommonJS）或import.meta.url（ES模块）来构建绝对路径，这两个变量指向当前代码文件的绝对目录，不受部署环境工作目录的影响。

CommonJS 示例

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

export async function getServerSideProps(context) {
  // 假设当前文件位于src/pages目录，Markdown目录为src/md
  // 通过__dirname向上回溯到src目录，再拼接md子目录
  const mdDir = path.resolve(__dirname, '../md');
  const filepath = path.join(mdDir, 'example.md');

  try {
    const content = await fs.readFile(filepath, { encoding: 'utf8' });
    // 根据SSR上下文处理内容
    return { props: { content } };
  } catch (err) {
    console.error('读取Markdown文件失败:', err);
    return { props: { content: '' } };
  }
}

ES模块 示例（Next.js 13+ App Router）

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

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

export async function getServerSideProps(context) {
  const mdDir = path.resolve(__dirname, '../md');
  const filepath = path.join(mdDir, 'example.md');

  try {
    const content = await fs.readFile(filepath, { encoding: 'utf8' });
    return { props: { content } };
  } catch (err) {
    console.error('读取Markdown文件失败:', err);
    return { props: { content: '' } };
  }
}

2. 确保Markdown文件被包含在部署包中 #

• 检查.gitignore：确保src/md目录或具体Markdown文件没有被添加到.gitignore，否则部署平台会忽略这些文件。
• 用Webpack插件复制文件：如果你的Markdown目录不在Next.js默认打包范围内，可通过copy-webpack-plugin手动将文件复制到构建输出目录：
  1. 安装依赖：

     npm install copy-webpack-plugin --save-dev
     

  2. 修改next.config.js：

     const path = require('path');
     const CopyPlugin = require('copy-webpack-plugin');
     
     module.exports = {
       webpack: (config) => {
         config.plugins.push(
           new CopyPlugin({
             patterns: [
               { from: path.join(__dirname, 'src', 'md'), to: 'md' },
             ],
           })
         );
         return config;
       },
     };
     

3. 验证部署环境的路径 #

部署后可在getServerSideProps中添加日志，确认实际路径是否正确：

console.log('当前工作目录:', process.cwd());
console.log('Markdown目录:', mdDir);
console.log('目标文件路径:', filepath);

通过部署平台的日志面板查看输出，快速定位路径问题。

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