I’m encountering issues deploying my Next.js project, which uses Prisma and MongoDB, to Vercel. The project works fine locally, but when I deploy it to Vercel, I get the following error:

at 8428 (/vercel/path0/.next/server/app/page.js:1:3202)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
at 5857 (/vercel/path0/.next/server/app/page.js:1:825)
at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
at r (/vercel/path0/.next/server/app/page.js:1:3644)
at /vercel/path0/.next/server/app/page.js:1:3682
at t.X (/vercel/path0/.next/server/webpack-runtime.js:1:1206)
at /vercel/path0/.next/server/app/page.js:1:3657
at Object.<anonymous> (/vercel/path0/.next/server/app/page.js:1:3709)
> Build error occurred
Error: Failed to collect page data for /
    at /vercel/path0/node_modules/next/dist/build/utils.js:1268:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
Error: Command "npm run build" exited with 1

Added a postinstall script to package.json:

"scripts": {
  "postinstall": "prisma generate"
}

erified that the DATABASE_URL is correctly set in Vercel.

Checked the detailed logs in Vercel, but the error persists.

Prisma Schema:

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mongodb"
  url      = env("DATABASE_URL")
}

model Course {
  id          String  @id @default(auto()) @map("_id") @db.ObjectId
  clerkId     String
  name        String
  description String?
  imageUrl    String?
  price       Float?
  isPublished Boolean @default(false)

  categoryId String?   @db.ObjectId
  category   Category? @relation(fields: [categoryId], references: [id])

  attachments Attachment[]
  chapters    Chapter[]
  purchases   Purchase[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([categoryId])
}

Prisma Client Instantiation:

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

const prismaClientSingleton = () => {
  return new PrismaClient();
};

declare const globalThis: {
  prismaGlobal: ReturnType<typeof prismaClientSingleton>;
} & typeof global;

const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();

export default prisma;

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

Main Page Code:

import prisma from '@/lib/prisma';

export default async function Home() {
  const courses = await prisma.course.findMany({
    select: {
      id: true,
      name: true,
    },
  });

  return (
    <main className="text-2xl">
      {courses.map((course) => (
        <p key={course.id}>{course.name}</p>
      ))}
    </main>
  );
}

Additional Information:

The project works perfectly fine locally.
The MongoDB connection string is correct and accessible.
All dependencies are up to date.

Question:

What could be causing this issue, and how can I resolve it to successfully deploy my Next.js and Prisma project with MongoDB to Vercel?