NextJS 14.2.4部署Vercel后无法读取文件系统文件求助

安全阿岳

2026-6-22

问题分析与解决方案

核心问题原因

路径拼接错误：原代码中join(process.cwd() + "/public/Images/PostImages")是错误用法，path.join需传入多个路径片段而非预拼接字符串，这种写法在Vercel的Linux环境下可能生成无效路径（如出现重复斜杠）。
public目录的用途误解：Next.js的public目录是静态资源托管目录，部署后资源会被CDN处理，而非保留原文件系统路径，直接读取public下的Markdown文件在Vercel环境中会找不到对应路径。
同步IO的适配问题：本地环境中同步文件读取可正常运行，但Vercel的无服务器函数环境更适配异步IO操作，同步方法可能触发路径解析异常。

修正后的代码实现

首先将Markdown文件从public/Posts迁移到项目根目录的content/posts（确保该目录未被.gitignore排除），图片可保留在public/Images/PostImages，然后修改读取逻辑：

import { join } from 'path';
import { readdir, readFile } from 'fs/promises';
import matter from 'gray-matter';

// 读取源码目录下的Markdown文件
const postsPath = join(process.cwd(), 'content', 'posts');
// 读取public下的图片目录
const imagesPath = join(process.cwd(), 'public', 'Images', 'PostImages');

export default async function PostMapper() {
  const files = await readdir(postsPath);
  const images = await readdir(imagesPath);

  const posts = await Promise.all(files.map(async (fileName) => {
    const slug = fileName.replace('.md', '');
    const filePath = join(postsPath, fileName);
    const fileContent = await readFile(filePath, 'utf8');
    const { data: frontmatter, content } = matter(fileContent);
    
    return {
      slug,
      frontmatter,
      content,
      images,
    };
  }));

  return posts;
}