NextJS+Prisma部署Vercel/PlanetScale生产环境数据操作异常求助

问题背景 #

技术栈为NextJS + Prisma，部署在Vercel和PlanetScale平台，搭建了四个报价管理页面：全部报价、已支付报价、已完成报价、未完成报价。核心逻辑是通过fetcher函数调用API路由获取数据，在页面层过滤对应类型数据后传递给Quotes组件展示。开发环境功能完全正常，但生产环境无法执行数据获取、更新、删除操作。

已实现代码片段 #

Prisma客户端初始化 #

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma =
  globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma

数据获取fetcher函数 #

// 获取全部报价
export const GetAllQuotesArray = async () => {
    const data = await fetch(`${baseURL}get-quotes`, { method: "GET" });
    const response = await data.json();
    return response;
}

管理页面数据获取逻辑 #

const [array, setArray ] = useState<IQuoteWithId[]>([]);
const [loading, setLoading] = useState<boolean>(false);

const allQuotesArray = async () => {
  setLoading(true);
  const result: IQuoteWithId[] = await GetAllQuotesArray();
  if (result) {
    setArray(result);
    setLoading(false);
  }
}

useEffect(() => {
  allQuotesArray();
}, []);

Quotes组件核心逻辑 #

const Quotes = ({ quotes, title, subtitle }: ComponentType): JSX.Element => {

  const [arrayQuotes, setArrayQuotes] = useState<IQuote[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  useEffect(() => { 
    setArrayQuotes(quotes);
  },[loading]);
  
  const handleDeleteQuoteById = async (quoteId: string) => {
    setLoading(true);
    await deleteQuoteById(quoteId);
    location.reload();
    setLoading(false);
  };
}

异常现象 #

• Vercel已与GitHub仓库关联，代码推送后自动完成生产环境部署
• 涉及的页面和组件均为客户端组件，但浏览器Network面板无任何API请求记录

排查与修复方案 #

1. 检查baseURL配置 #

生产环境下Next.js API路由使用相对路径，若baseURL硬编码为开发环境域名（如http://localhost:3000），会导致请求地址无效甚至无法触发请求。建议：

• 将baseURL设为空字符串''，直接使用相对路径请求：fetch('/api/get-quotes')
• 或通过环境变量动态设置，确保生产环境使用正确的路径

2. 验证API路由有效性 #

• 确认API路由文件存在且路径正确：比如pages/api/get-quotes.ts（Pages Router）或app/api/get-quotes/route.ts（App Router）
• 检查路由文件名和路径拼写，Vercel部署时路由路径严格匹配文件结构，拼写错误会导致路由404

3. 确认生产环境环境变量 #

• 检查Vercel项目的环境变量配置，确保DATABASE_URL（PlanetScale连接字符串）与开发环境一致且已正确添加
• 验证Prisma客户端生成：在Vercel构建命令中确保包含prisma generate，否则生产环境无法生成适配数据库的客户端

4. 添加请求错误捕获 #

在异步请求中加入try/catch，打印错误信息到控制台，便于定位问题：

export const GetAllQuotesArray = async () => {
  try {
    const data = await fetch(`${baseURL}get-quotes`, { method: "GET" });
    if (!data.ok) throw new Error(`请求失败：状态码 ${data.status}`);
    const response = await data.json();
    return response;
  } catch (err) {
    console.error('获取报价失败:', err);
    throw err;
  }
}

5. 查看Vercel部署日志 #

进入Vercel项目的Deployment页面，检查：

• 构建阶段是否执行prisma generate成功
• API路由是否有编译错误
• 数据库连接是否正常（Prisma初始化是否报错）

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