Deploy to Vercel Edge Functions & Middleware

This page covers everything you need to know to deploy an app that uses Prisma Client for talking to a database in Vercel Edge Middleware or a Vercel Function deployed to the Vercel Edge Runtime.

To deploy a Vercel Function to the Vercel Edge Runtime, you can set export const runtime = 'edge' outside the request handler of the Vercel Function.

General considerations when deploying to Vercel Edge Functions & Edge Middleware

Using an edge-compatible driver

Vercel's Edge Runtime currently only supports a limited set of database drivers:

• Neon Serverless uses HTTP to access the database (also compatible with Vercel Postgres)
• PlanetScale Serverless uses HTTP to access the database
• @libsql/client is used to access Turso databases

Note that node-postgres (pg) is currently not supported on Vercel Edge Functions.

When deploying a Vercel Edge Function that uses Prisma ORM, you need to use one of these edge-compatible drivers and its respective driver adapter for Prisma ORM.

Note: Prisma Accelerate enables you to access any database from any edge function provider. No edge-compatible driver is necessary.

Setting your database connection URL as an environment variable

First, ensure that the DATABASE_URL is set as the url of the datasource in your Prisma schema:

datasource db {
  provider = "postgresql" // this might also be `mysql` or another value depending on your database
  url      = env("DATABASE_URL")
}

Development

When in development, you can configure your database connection via the DATABASE_URL environment variable (e.g. using .env files).

Production

When deploying your Edge Function to production, you'll need to set the database connection using the vercel CLI:

npx vercel env add DATABASE_URL

This command is interactive and will ask you to select environments and provide the value for the DATABASE_URL in subsequent steps.

Alternatively, you can configure the environment variable via the UI of your project in the Vercel Dashboard.

Generate Prisma Client in postinstall hook

In your package.json, you should add a "postinstall" section as follows:

package.json

{
  // ...,
  "postinstall": "prisma generate"
}

Size limits on free accounts

Vercel has a size limit of 1 MB on free accounts. If your application bundle with Prisma ORM exceeds that size, we recommend upgrading to a paid account or using Prisma Accelerate to deploy your application.

Database-specific considerations & examples

This section provides database-specific instructions for deploying a Vercel Edge Functions with Prisma ORM.

Prerequisites

As a prerequisite for the following section, you need to have a Vercel Edge Function (which typically comes in the form of a Next.js API route) running locally and the Prisma and Vercel CLIs installed.

If you don't have that yet, you can run these commands to set up a Next.js app from scratch (following the instructions of the Vercel Functions Quickstart):

npm install -g vercel
npx create-next-app@latest
npm install prisma --save-dev
npx prisma init

We'll use the default User model for the example below:

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
}

Vercel Postgres

If you are using Vercel Postgres, you need to:

• use the @prisma/adapter-neon database adapter (via the driverAdapters Preview feature) because Vercel Postgres uses Neon under the hood
• be aware that Vercel by default calls the environment variable for the database connection string POSTGRES_PRISMA_URL while the default name used in the Prisma docs is typically DATABASE_URL; using Vercel's naming, you need to set the following fields on your datasource block:

  datasource db {
    provider  = "postgresql"
    url       = env("POSTGRES_PRISMA_URL") // uses connection pooling
    directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
  }

1. Configure Prisma schema & database connection

Note: If you don't have a project to deploy, follow the instructions in the Prerequisites to bootstrap a basic Next.js app with Prisma ORM in it.

First, ensure that the database connection is configured properly. In your Prisma schema, set the url of the datasource block to the POSTGRES_PRISMA_URL and the directUrl to the POSTGRES_URL_NON_POOLING environment variable. You also need to enable the driverAdapters feature flag:

schema.prisma

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

datasource db {
  provider  = "postgresql"
  url       = env("POSTGRES_PRISMA_URL") // uses connection pooling
  directUrl = env("POSTGRES_URL_NON_POOLING") // uses a direct connection
}

Next, you need to set the POSTGRES_PRISMA_URL and POSTGRES_URL_NON_POOLING environment variable to the values of your database connection.

If you ran npx prisma init, you can use the .env file that was created by this command to set these:

.env

POSTGRES_PRISMA_URL="postgres://user:password@host-pooler.region.postgres.vercel-storage.com:5432/name?pgbouncer=true&connect_timeout=15"
POSTGRES_URL_NON_POOLING="postgres://user:password@host.region.postgres.vercel-storage.com:5432/name"

2. Install dependencies

Next, install the required packages:

npm install @prisma/adapter-neon
npm install @neondatabase/serverless

3. Configure postinstall hook

Next, add a new key to the scripts section in your package.json:

package.json

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

4. Migrate your database schema (if applicable)

If you ran npx prisma init above, you need to migrate your database schema to create the User table that's defined in your Prisma schema (if you already have all the tables you need in your database, you can skip this step):

npx prisma migrate dev --name init

5. Use Prisma Client in your Vercel Edge Function to send a query to the database

If you created the project from scratch, you can create a new edge function as follows.

First, create a new API route, e.g. by using these commands:

mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts

Here is a sample code snippet that you can use to instantiate PrismaClient and send a query to your database in the new app/api/edge/route.ts file you just created:

app/api/edge/route.ts

import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
import { Pool } from '@neondatabase/serverless'

export const runtime = 'edge'

export async function GET(request: Request) {
  const neon = new Pool({ connectionString: process.env.POSTGRES_PRISMA_URL })
  const adapter = new PrismaNeon(neon)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  return NextResponse.json(users, { status: 200 })
}

6. Run the Edge Function locally

Run the app with the following command:

npm run dev

You can now access the Edge Function via this URL: http://localhost:3000/api/edge.

7. Set the POSTGRES_PRISMA_URL environment variable and deploy the Edge Function

Run the following command to deploy your project with Vercel:

npx vercel deploy

Note that once the project was created on Vercel, you will need to set the POSTGRES_PRISMA_URL environment variable (and if this was your first deploy, it likely failed). You can do this either via the Vercel UI or by running the following command:

npx vercel env add POSTGRES_PRISMA_URL

At this point, you can get the URL of the deployed application from the Vercel Dashboard and access the edge function via the /api/edge route.

PlanetScale

If you are using a PlanetScale database, you need to:

• use the @prisma/adapter-planetscale database adapter (via the driverAdapters Preview feature)

1. Configure Prisma schema & database connection

Note: If you don't have a project to deploy, follow the instructions in the Prerequisites to bootstrap a basic Next.js app with Prisma ORM in it.

First, ensure that the database connection is configured properly. In your Prisma schema, set the url of the datasource block to the DATABASE_URL environment variable. You also need to enable the driverAdapters feature flag:

schema.prisma

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

datasource db {
  provider     = "mysql"
  url          = env("DATABASE_URL")
  relationMode = "prisma" // required for PlanetScale (as by default foreign keys are disabled)
}

Next, you need to set the DATABASE_URL environment variable in your .env file that's used both by Prisma and Next.js to read your env vars:

.env

DATABASE_URL="mysql://32qxa2r7hfl3102wrccj:password@us-east.connect.psdb.cloud/demo-cf-worker-ps?sslaccept=strict"

2. Install dependencies

Next, install the required packages:

npm install @prisma/adapter-planetscale
npm install @planetscale/database

3. Configure postinstall hook

Next, add a new key to the scripts section in your package.json:

package.json

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

4. Migrate your database schema (if applicable)

If you ran npx prisma init above, you need to migrate your database schema to create the User table that's defined in your Prisma schema (if you already have all the tables you need in your database, you can skip this step):

npx prisma db push

5. Use Prisma Client in an Edge Function to send a query to the database

If you created the project from scratch, you can create a new edge function as follows.

First, create a new API route, e.g. by using these commands:

mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts

Here is a sample code snippet that you can use to instantiate PrismaClient and send a query to your database in the new app/api/edge/route.ts file you just created:

app/api/edge/route.ts

import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaPlanetScale } from '@prisma/adapter-planetscale'
import { Client } from '@planetscale/database'

export const runtime = 'edge'

export async function GET(request: Request) {
  const client = new Client({ url: process.env.DATABASE_URL })
  const adapter = new PrismaPlanetScale(client)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  return NextResponse.json(users, { status: 200 })
}

6. Run the Edge Function locally

Run the app with the following command:

npm run dev

You can now access the Edge Function via this URL: http://localhost:3000/api/edge.

7. Set the DATABASE_URL environment variable and deploy the Edge Function

Run the following command to deploy your project with Vercel:

npx vercel deploy

Note that once the project was created on Vercel, you will need to set the DATABASE_URL environment variable (and if this was your first deploy, it likely failed). You can do this either via the Vercel UI or by running the following command:

npx vercel env add DATABASE_URL

At this point, you can get the URL of the deployed application from the Vercel Dashboard and access the edge function via the /api/edge route.

Neon

If you are using a Neon database, you need to:

• use the @prisma/adapter-neon database adapter (via the driverAdapters Preview feature)

1. Configure Prisma schema & database connection

Note: If you don't have a project to deploy, follow the instructions in the Prerequisites to bootstrap a basic Next.js app with Prisma ORM in it.

First, ensure that the database connection is configured properly. In your Prisma schema, set the url of the datasource block to the DATABASE_URL environment variable. You also need to enable the driverAdapters feature flag:

schema.prisma

generator client {
  provider        = "prisma-client-js"
  previewFeatures = ["driverAdapters"]
}

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

Next, you need to set the DATABASE_URL environment variable in your .env file that's used both by Prisma and Next.js to read your env vars:

.env

DATABASE_URL="postgresql://janedoe:password@ep-nameless-pond-a23b1mdz.eu-central-1.aws.neon.tech/neondb?sslmode=require"

2. Install dependencies

Next, install the required packages:

npm install @prisma/adapter-neon
npm install @neondatabase/serverless

3. Configure postinstall hook

Next, add a new key to the scripts section in your package.json:

package.json

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

4. Migrate your database schema (if applicable)

If you ran npx prisma init above, you need to migrate your database schema to create the User table that's defined in your Prisma schema (if you already have all the tables you need in your database, you can skip this step):

npx prisma migrate dev --name init

5. Use Prisma Client in an Edge Function to send a query to the database

If you created the project from scratch, you can create a new edge function as follows.

First, create a new API route, e.g. by using these commands:

mkdir src/app/api
mkdir src/app/api/edge
touch src/app/api/edge/route.ts

Here is a sample code snippet that you can use to instantiate PrismaClient and send a query to your database in the new app/api/edge/route.ts file you just created:

app/api/edge/route.ts

import { NextResponse } from 'next/server'
import { PrismaClient } from '@prisma/client'
import { PrismaNeon } from '@prisma/adapter-neon'
import { Pool } from '@neondatabase/serverless'

export const runtime = 'edge'

export async function GET(request: Request) {
  const neon = new Pool({ connectionString: process.env.DATABASE_URL })
  const adapter = new PrismaNeon(neon)
  const prisma = new PrismaClient({ adapter })

  const users = await prisma.user.findMany()

  return NextResponse.json(users, { status: 200 })
}

6. Run the Edge Function locally

Run the app with the following command:

npm run dev

You can now access the Edge Function via this URL: http://localhost:3000/api/edge.

7. Set the DATABASE_URL environment variable and deploy the Edge Function

Run the following command to deploy your project with Vercel:

npx vercel deploy

Note that once the project was created on Vercel, you will need to set the DATABASE_URL environment variable (and if this was your first deploy, it likely failed). You can do this either via the Vercel UI or by running the following command:

npx vercel env add DATABASE_URL

At this point, you can get the URL of the deployed application from the Vercel Dashboard and access the edge function via the /api/edge route.