Skip to main content

Vercel

The Vercel Marketplace integration for Prisma Postgres connects your Vercel projects with Prisma Postgres instances. Once connected, the integration will automatically set the DATABASE_URL environment variable on your deployed Vercel app.

Features​

  • Create and use Prisma Postgres instances without leaving the Vercel dashboard.
  • Automatic generation of Prisma Postgres URLs keys for production and preview environments.
  • Simplified environment configuration for your Vercel project.
  • Billing workflows to up-/ and downgrade your Prisma Postgres pricing plan.
  • Ready-to-deploy fullstack Next.js template with authentication.

Usage​

Note: The easiest way to use the Prisma Postgres extension is via the Next.js Auth Template.

Install the extension​

To install the extension, click Install at the top of the Prisma Postgres integration page.

The integration will now show up on your list of integrations, e.g. https://vercel.com/<VERCEL-TEAM>/~/integrations.

Create a new database​

Once installed, you can navigate to the Storage tab and click Create Database.

Select Prisma Postgres and click Continue. Then select the Region for the database and a Pricing Plan, and click Continue again.

Finally, give the database a Name and click Create.

The database is now ready and can be connected to your Vercel projects.

Connect database to Vercel project​

In your Vercel project, you can now click the Storage tab, select the database you just created and then click Connect. This will automatically set the DATABASE_URL environment variable in that project and enable your application to access your newly created Prisma Postgres instance.

Viewing and editing data in Prisma Studio​

To view and edit the data in your Prisma Postgres instance, you can use the local version of Prisma Studio.

In the local version of your project where you have your DATABASE_URL set, run the following command to open Prisma Studio:

npx prisma studio

Additional considerations​

Ensure your project uses the DATABASE_URL environment variable​

Ensure that the data source in your schema.prisma file is configured to use the DATABASE_URL environment variable:

// schema.prisma
generator client {
  provider = "prisma-client-js"
}

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

Generate Prisma Client in a postinstall script in package.json​

To ensure the generated Prisma Client library is available on your deployed Vercel project, you should add a postinstall script to the scripts section of your package.json file:

package.json
{
  // ...
  "scripts": {
    // ...
    "postinstall": "prisma generate --no-engine"
  }
  //
}

The --no-engine flag ensures that the query engine binary is kept out of the generated Prisma Client library. It's not needed when using Prisma Postgres.

Example: Deploy a Next.js template with Prisma Postgres​

To get started you can deploy our Next.js starter template and connect via Prisma Postgres instance during the deployment flow.