Can't access supabase in vercel deployed product (Nextjs14)

I am creating web app with Nextjs14, prisma, and supabase (postgreSQL). In my localhost it works well, but I deployed it on vercel and this error happened.

I did integration in vercel to connect to supabase.

The endpoints I used are here:

http://localhost:3000/api/player/attendance (for local, it works)
https://*****.vercel.app/api/player/attendance (for vercel, doesn't work)

shema.prisma

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

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

.env (I replaced my own ones)

DATABASE_URL="postgres://[db-user]:[db-password]@aws-0-[aws-region].pooler.supabase.com:5432/[db-name]"

I found this article PGBouncer and IPv4 Deprecation but my url already looks like this...right? I also tried postman with this endpoint (https://*****.vercel.app/api/player/attendance) and the return was

{
    "message": "Error",
    "error": {
        "name": "PrismaClientInitializationError",
        "clientVersion": "5.9.1"
    }
}

so the problem is the connection with supabase right?

Here is the errors from vercel. I think that the first error makes the last two ones because I use 'map' with the data of supabase

[GET] /api/player/attendance status=500 

TypeError: Cannot read properties of undefined (reading 'map') at l (/var/task/.next/server/app/page.js:2:4654) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) 

 [Error: An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.] { digest: '3113241611' } 

So what is my problem?

Thanks

It looks like your Prisma client isn't initializing correctly. Your database URL is also not set up to use connection pooling with Supavisor and it's using the wrong port. Here's how you can fix both -

1. Update your database URL to append ?pgbouncer=true as per prisma docs
2. Update the port from 5432 to 6543.

After making the above two changes, your database URL would look like -

DATABASE_URL="postgres://[db-user]:[db-password]@aws-0-[aws-region].pooler.supabase.com:6543/[db-name]?pgbouncer=true"

To ensure Prisma client is initialized correctly as per prisma docs-

1. Update the build command in your package.json -

   "build": "prisma generate && next build"

2. Add a new command in the scripts object in your package.json

   "postinstall": "prisma generate"

3. Update your Vercel's build and output settings, override the build command to the following -

   npx prisma generate && next build