部署至Vercel后Next.js博客无法读取目录的问题求助

问题背景 #

我使用NextJS搭建基础博客网站，所有博客数据以JSON格式存储在public/blogdata文件夹中。通过API路由读取该文件夹内容并返回数据，前端通过getServerSideProps获取数据。本地运行yarn dev时一切正常，但部署到Vercel后网站出现500内部服务器错误，日志显示Vercel无法找到public/blogdata目录，推测与代码编译后的运行机制有关，需要修复指导。

相关代码 #

pages/api/blogs.ts #

import type { NextApiRequest, NextApiResponse } from 'next'
import * as fs from 'fs/promises';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  let blogs;
  blogs = await fs.readdir("./public/blogdata/", "utf-8")
  res.status(200).json({ blogs })
}

pages/index.tsx #

export async function getServerSideProps() {
  /**
    🔎️🔗️🔃️
    */
  let data;
  try {
    if (process.env.ENVIORMENT == "dev") {
      data = await fetch("http://localhost:3000/api/blogs") // 🔗️
      data = await data.json() // 🔃️
      console.log(data.blogs) // 🔎️
    }
    else {
      data = await fetch("https://blog-templates-demo.vercel.app/api/blogs") // 🔗️
      console.log(data)
      data = await data.json() // 🔃️
      console.log(data.blogs) // 🔎️
      data = data.blogs
    }
  }
  catch (err) {
    console.error(err) // 🚫️
  }
  return { props: { data } } // 📦️
}

修复方案 #

1. 修正API路由中的文件路径问题 #

Vercel部署后，Next.js的编译产物结构与本地开发环境不同，相对路径./public/blogdata/会失效。需改用基于项目根目录的绝对路径，借助process.cwd()获取项目根目录：

修改pages/api/blogs.ts：

import type { NextApiRequest, NextApiResponse } from 'next'
import * as fs from 'fs/promises';
import * as path from 'path'; // 新增导入path模块

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse,
) {
  let blogs;
  // 构建绝对路径
  const dirPath = path.join(process.cwd(), 'public', 'blogdata');
  blogs = await fs.readdir(dirPath, "utf-8")
  res.status(200).json({ blogs })
}

2. 优化getServerSideProps逻辑（可选但推荐） #

在getServerSideProps中调用外部fetch属于冗余操作，既增加网络开销，也可能引发部署后的请求问题。直接在服务端函数中读取文件，无需通过API路由转发：

修改pages/index.tsx：

import * as fs from 'fs/promises'; // 新增导入fs模块
import * as path from 'path'; // 新增导入path模块

export async function getServerSideProps() {
  let data = [];
  try {
    const dirPath = path.join(process.cwd(), 'public', 'blogdata');
    data = await fs.readdir(dirPath, "utf-8");
  } catch (err) {
    console.error(err);
  }
  return { props: { data } };
}

3. 环境变量拼写修正（若保留原逻辑） #

原代码中环境变量拼写错误：ENVIORMENT应为NODE_ENV（Next.js默认用此变量区分开发/生产环境），修正后为：

if (process.env.NODE_ENV === "development") {
  // 开发环境逻辑
}

核心修复要点 #

• 永远不要用相对路径读取服务器上的文件，改用process.cwd()拼接绝对路径
• 服务端数据获取函数（如getServerSideProps）中直接读取本地文件，避免不必要的API请求转发
• 检查环境变量拼写，依赖Next.js提供的标准环境变量判断运行环境

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