NextJS项目Vercel部署API调用失败，求可行解决方案

问题原因分析 #

1. URL格式错误：你使用${process.env.VERCEL_URL}/api/productsCollection时，VERCEL_URL的值没有包含https://协议头，导致Node的fetch无法解析成合法URL，抛出ERR_INVALID_URL错误。
2. Build阶段API未运行：NextJS的静态生成（getStaticPaths/getStaticProps）是在构建阶段执行的，此时Vercel的API路由还未部署启动，通过HTTP请求API的方式本身就不可行；直接使用相对路径/api/productsCollection在Node环境的fetch中会被识别为文件路径，而非网络URL，同样会报错。

推荐解决方案：直接复用数据库逻辑，跳过HTTP请求 #

既然你的API路由本质是调用prisma.products.findMany()获取数据，最合理的做法是将数据库查询逻辑抽离成公共函数，在静态生成函数中直接调用，而非通过API接口中转。

步骤1：抽离公共数据获取函数 #

创建lib/products.js文件，封装产品查询逻辑：

import { prisma } from '../prisma/client'; // 导入你的Prisma客户端

export async function getProducts() {
  // 直接复用API中的数据库查询逻辑
  return await prisma.products.findMany();
}

步骤2：修改API路由使用公共函数 #

更新pages/api/productsCollection.js，调用公共函数：

import { getProducts } from '../../lib/products';

export default async function handler(req, res) {
  const products = await getProducts();
  res.status(200).json(products);
}

步骤3：在静态生成函数中直接调用公共函数 #

修改pages/products/[products].js中的getStaticPaths：

import { getProducts } from '../../lib/products';

export async function getStaticPaths() {
  // 直接调用数据库查询函数，无需HTTP请求
  const products = await getProducts();
  
  const paths = products.map(product => ({
    params: { products: product.id.toString() }
  }));

  return { paths, fallback: false };
}

补充说明 #

如果一定要通过HTTP请求API（不推荐），可以先修复URL格式，给VERCEL_URL加上协议头：

const res = await fetch(`https://${process.env.VERCEL_URL}/api/productsCollection`)

但这种方法在Build阶段依然会失败，因为此时API还未部署，仅能在项目运行后使用，无法解决静态生成时的问题。

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