Vercel部署时/api/blogs/[blogId]页面数据收集失败问题求助

问题现象 #

在Vercel部署Next.js项目时触发构建错误，具体提示：

Failed to collect page data for /api/blogs/[blogId]

已尝试的无效操作 #

将API路由文件扩展名从page.js改为page.jsx，问题未得到解决。

相关代码片段 #

API路由代码（/api/blogs/[blogId]/page.js） #

import { prisma } from '@/lib/db';
import { NextResponse } from 'next/server';

export async function GET(request, { params }) {
  const { blogId } = params;
  try {
    const blog = await prisma.blog.findUnique({
      where: { id: blogId },
    });
    return NextResponse.json(blog);
  } catch (error) {
    return NextResponse.json({ error: 'Failed to fetch blog' }, { status: 500 });
  }
}

DB配置代码（lib/db.js） #

import { PrismaClient } from '@prisma/client';

const prisma = global.prisma || new PrismaClient();

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

export { prisma };

详情页UI代码（app/blogs/[blogId]/page.jsx） #

import { prisma } from '@/lib/db';

export async function generateStaticParams() {
  const blogs = await prisma.blog.findMany();
  return blogs.map((blog) => ({
    blogId: blog.id,
  }));
}

export default async function BlogDetail({ params }) {
  const { blogId } = params;
  const blog = await prisma.blog.findUnique({
    where: { id: blogId },
  });

  if (!blog) return <div>Blog not found</div>;

  return (
    <div>
      <h1>{blog.title}</h1>
      <p>{blog.content}</p>
    </div>
  );
}

tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

最终解决方案 #

在项目根目录的package.json的scripts字段中添加postinstall脚本，确保Prisma客户端在构建前正确生成：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate && npm run build"
  }
}

添加完成后重新部署Vercel即可解决构建错误。

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