Next.js预渲染页面报错：本地开发正常但部署至Vercel构建失败

我之前也碰到过类似的Vercel构建报错问题，结合你的代码和Next.js+Vercel的运行机制，给你拆解下核心原因和解决办法：

核心问题分析 #

1. 构建阶段API无法访问
   当Vercel执行getStaticProps做静态构建时，你的项目还没完成部署上线，https://jovanka-samudra.vercel.app/api/projects这个线上API地址根本不存在，直接调用必然会触发fetch请求失败，导致构建中断。

2. 冗余的API调用逻辑
   getStaticProps本身就是在服务器端（构建阶段）运行的函数，完全可以直接调用你的数据库操作逻辑，没必要绕一圈通过HTTP请求自己的API——这既增加了网络开销，又引入了构建时的不可靠性。

推荐解决方案：直接在getStaticProps中调用数据层逻辑 #

这是Next.js静态生成的最佳实践，直接复用你已有的服务层和数据库连接代码，跳过API请求环节：

修改后的getStaticProps代码：

import ProjectService from "@services/ProjectService"; 
import connectDB from "@utils/connectDB";

export const getStaticProps = async () => { 
  const baseUrlDribble = 'https://api.dribbble.com/v2'; 

  // 1. 先初始化数据库连接
  await connectDB();
  // 2. 直接调用服务层获取项目数据
  const projectService = new ProjectService();
  const projects = await projectService.getProjects();

  // 原有Dribbble API调用逻辑保持不变
  const resShots = await fetch(`${baseUrlDribble}/user/shots?access_token=${process.env.TOKEN_DRIBBLE}&page=1&per_page=9`); 
  const shots = await resShots.json(); 

  return { 
    props: { shots, projects }, 
    revalidate: 1, 
  } 
}

为什么这样可行？ #

• 构建阶段直接操作数据库，完全避开了未上线API的访问问题
• 复用你已有的服务层代码，不需要额外维护API调用的错误处理逻辑
• 符合Next.js设计初衷，getStaticProps就是为了在构建时直接获取数据源而存在的

额外检查项 #

1. Vercel环境变量配置
   确保你在Vercel的项目设置中，已经添加了所有必要的环境变量（比如数据库连接字符串、TOKEN_DRIBBLE等）——构建阶段如果缺失环境变量，也会导致数据库连接失败或第三方API调用出错。

2. 查看构建日志细节
   如果修改后还是报错，去Vercel的构建日志里找具体的错误信息（比如数据库连接超时、权限问题等），这能帮你更快定位剩余问题。

不推荐的备选方案（仅作参考） #

如果你坚持要通过API获取数据，可以把getStaticProps换成getServerSideProps——这样数据请求会在每个用户请求时运行（而非构建阶段），此时你的项目已经部署完成，API可以正常访问。但这种方式会失去静态生成的性能优势，页面响应速度会变慢。

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