Unexpected Issues with Next.js Server Actions and Prisma for Complex Mutations / Vercel Deployment

[ussfranck]

Link to the code that reproduces this issue

https://github.com/ussfranck/nextjs-prisma-server-actions-issue

To Reproduce

How to Reproduce:

1. Start the application in development (next dev).
2. Navigate to the page or component that uses the Server Action and Prisma to fetch data.
3. Trigger the action (e.g., by clicking a button, submitting a form, or navigating to a specific route).
4. Observe the expected data being displayed correctly.
5. Deploy the application to Vercel.
6. Access the deployed application on Vercel.
7. Navigate to the same page or component as in step 2.
8. Observe the error page or the lack of data, indicating the failure to fetch data.

9. Check the Vercel function logs for Prisma errors, specifically a "PrismaClientKnownRequestError" with a message similar to "Error validating datasource `db`: the URL must start with the protocol `prisma:`".

Current vs. Expected behavior

Current vs. Expected Behavior:

Following the steps in the "How to Reproduce" section:

• Expected Behavior: The application should fetch data from the PostgreSQL database using Prisma within the Next.js Server Action and display it correctly on the page, both in the local development environment and after deployment to Vercel. For example, the list of rooms should be displayed on the main page (/), and the details of a selected room should be displayed on the room details page (/rooms/[id]).

• Actual Behavior: The application functions correctly in local development. However, after deployment to Vercel, the application fails to fetch data. Instead of displaying the data, the user sees an error page or a blank page where the data should be. The Vercel function logs show a "PrismaClientKnownRequestError" with a message similar to "Error validating datasource `db`: the URL must start with the protocol `prisma:`". This error indicates that Prisma is unable to connect to the database in the Vercel environment, even though the connection works correctly locally.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro
  Available memory (MB): 16242
  Available CPU cores: 8
Binaries:
  Node: 22.15.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.9.0
Relevant Packages:
  next: 15.3.2 // Latest available version is detected (15.3.2).
  eslint-config-next: 15.3.2
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.8.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Server Actions

Which stage(s) are affected? (Select all that apply)

Vercel (Deployed)

Additional context

The issue manifests exclusively during deployment on Vercel. The application functions perfectly locally with next dev. The issue is not related to a specific browser. The error observed in the Vercel logs is a "PrismaClientKnownRequestError" with the message "Error validating datasource `db`: the URL must start with the protocol `prisma:`". This error indicates that Prisma is unable to validate the database URL in the Vercel environment, whereas this URL is valid and functional locally. This suggests a problem with the Vercel-specific environment or configuration that affects how Prisma accesses the database environment variable.

We have explored many avenues to resolve this problem, without success:

• Vercel environment variable configuration: We have repeatedly verified that the environment variable containing the database URL was correctly defined in the Vercel project settings, using the exact name expected by Prisma.
• Database URL types: We have attempted to use both the direct connection URL to the PostgreSQL (Neon) database and a proxy URL provided by Neon, with no difference in behavior.
• Prisma schema: We have carefully examined the prisma/schema.prisma file to ensure that the data source was correctly configured and that the database type was specified as PostgreSQL.
• SSL mode: We have tried to force the use of SSL by adding the ?sslmode=require parameter to the database connection string.
• Prisma Data Proxy: We have experimented with Prisma's dataProxy option, although our database is hosted on Neon, which is compatible with direct connections.
• vercel.json file: We added a vercel.json file to the root of the project with specific configurations (such as defining environment variables) to try to work around the problem.
• Vercel cache: We have cleared the Vercel build cache several times, thinking that obsolete configurations could be the cause of the problem.

Despite all these efforts, the error persists in production on Vercel, which has forced us to migrate to a NestJS backend to ensure the application's stability.