I’m developing a Next.js project using JavaScript (not TypeScript) with Prisma for backend operations. The project is hosted on Vercel, and I’m using a PostgreSQL database hosted on Supabase.

Problem:
Prisma works fine in server components both locally and in production. However, it fails in API routes when deployed to Vercel. Locally, the API routes work as expected, but in production, I get a “prisma is undefined” error.

Environment:

Next.js version: 14.2.5
Prisma version: 5.19.0
@prisma/client version: 5.17.0
Vercel (for hosting)
Supabase (for PostgreSQL database)
Node.js version: (please specify the version you’re using locally and on Vercel)

Here’s a simplified version of my API route where Prisma fails in production:

// app/api/diaries/route.js
import { NextResponse } from 'next/server';
import prisma from "@/lib/prisma";

export async function GET() {
  try {
    const diaries = await prisma.diary.findMany();
    return NextResponse.json(diaries);
  } catch (error) {
    console.error("Error fetching diaries:", error);
    return NextResponse.json({ error: 'Failed to fetch diaries', details: error.message }, { status: 500 });
  }
}

Here’s a server component (page.js) where Prisma works correctly both locally and in production:

// app/diaries/page.js
import { getServerSession } from "next-auth/next";
import { redirect } from "next/navigation";
import Link from "next/link";
import DiaryList from "./DiaryList";
import prisma from "@/lib/prisma";

export default async function DiaryPage() {
  const session = await getServerSession();

  if (!session) {
    redirect("/api/auth/signin");
  }

  const diaries = await prisma.diary.findMany({
    where: { userId: session.user.id },
    orderBy: { createdAt: "desc" },
  });

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-6 text-gray-800">My Diaries</h1>
      <DiaryList diaries={diaries} />
      <Link href="/diaries/new" className="mt-6 inline-block bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors">
        Write New Diary
      </Link>
    </div>
  );
}

And here’s how I’m initializing Prisma:

// lib/prisma.js
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()
if (process.env.NODE_ENV !== 'production') global.prisma = prisma

export default prisma

My build script in package.json is:

"build": "prisma generate && prisma migrate deploy && next build"

What I’ve Tried:

Checked that the DATABASE_URL environment variable is correctly set in Vercel.
Verified that the Prisma schema is up to date and migrations are applied.
Confirmed that the issue only occurs in API routes, not in server components.

Expected Behavior:
The API routes should work in production as they do locally, with Prisma correctly initialized and able to query the database.
Actual Behavior:
In production, API routes fail with a “prisma is undefined” error, while they work fine locally and in server components.