Deploy to Vercel

Steps

1. Go to deployment-example-vercel and click the Deploy button.

   

   The Deploy Button is a Vercel feature that allows you to deploy a project and clone the source Git repository to your own repository.

2. On the Create Git Repository screen, select GitHub.

   

3. Pick a repository name. This will be the name of the cloned repository in your GitHub account. In this guide, we use the name prisma-vercel-example:

   

   If this is your first time using Vercel, you will be prompted to install the Vercel app in your GitHub account.

4. Click Create.

5. On the Configure Project screen, set the DATABASE_URL environment variable to the connection string for your PostgreSQL database:

   

   The database connection string has the following format:

   postgresql://__USER__:__PASSWORD__@__HOST__/__DATABASE__

   For example, on Supabase it looks similar to:

   postgresql://janedoe:randompassword@db.projectcode.supabase.co:5432/postgres

6. Click Deploy.

   Vercel will now deploy your application. The package.json file in the root directory of the example project uses a vercel-build script to run prisma generate && prisma migrate deploy && next build. This generates Prisma Client, applies the migrations, and then builds the Next.js project. This ensures that the generated Prisma Client in node_modules/@prisma/client is available to the Next.js serverless functions.

Result

When the build completes, you should see the following:

You have successfully deployed the app to Vercel. Note that Vercel will build and deploy further commits to your GitHub repository.

To check that the API returns data successfully, click on the image of the deployed application. This will take you to your application at https://__PROJECT-NAME__.vercel.app/, where __PROJECT-NAME__ is the name that Vercel generates for the project.

When the page loads, click Check API status. If successful, you will see a result similar to the image below.

{"up":true}

Steps

1. Click Load users with profiles.

   You do not yet have any data in the database, so the application returns an empty array:

   []

   This API call uses Prisma to get all users in the database with their related profiles. The code is in the pages/api/users.js file in the project repository.

2. Click Seed data.

   This API call uses Prisma to delete any existing database records and load the database with test users, profiles, and posts, then returns the created users. The code is in the pages/api/seed.js file.

3. Click Load users with profiles again.

   This now returns the users and profiles that you added in the previous step:

   [
   {
   "id": 5,
   "email": "jane@prisma.io",
   "name": "Jane",
   "profiles": [
     {
       "id": 13,
       "bio": "Technical Writer",
       "userId": 5
     },
     {
       "id": 14,
       "bio": "Health Enthusiast",
       "userId": 5
     },
     {
       "id": 15,
       "bio": "Self Quantifier",
       "userId": 5
     }
   ]
   },
   {
   "id": 6,
   "email": "toru@prisma.io",
   "name": "Toru Takemitsu",
   "profiles": [
     {
       "id": 16,
       "bio": "Composer",
       "userId": 6
     },
     {
       "id": 17,
       "bio": "Musician",
       "userId": 6
     },
     {
       "id": 18,
       "bio": "Writer",
       "userId": 6
     }
   ]
   }
   ]

4. Click Load posts.

   This returns the following output:

   [
   {
   "id": 11,
   "content": "https://www.prisma.io/blog/comparison-of-database-models-1iz9u29nwn37/",
   "title": "Comparing Database Types: How Database Types Evolved to Meet Different Needs",
   "authorId": 5,
   "author": {
     "id": 5,
     "email": "jane@prisma.io",
     "name": "Jane"
   }
   },
   {
   "id": 12,
   "content": "https://quantifiedself.com/get-started/",
   "title": "Analysing Sleep Patterns: The Quantified Self",
   "authorId": 5,
   "author": {
     "id": 5,
     "email": "jane@prisma.io",
     "name": "Jane"
   }
   },
   {
   "id": 13,
   "content": "",
   "title": "Requiem for String Orchestra",
   "authorId": 6,
   "author": {
     "id": 6,
     "email": "toru@prisma.io",
     "name": "Toru Takemitsu"
   }
   },
   {
   "id": 14,
   "content": "",
   "title": "Music of Tree",
   "authorId": 6,
   "author": {
     "id": 6,
     "email": "toru@prisma.io",
     "name": "Toru Takemitsu"
   }
   },
   {
   "id": 15,
   "content": "",
   "title": "Waves for clarinet, horn, two trombones and bass drum ",
   "authorId": 6,
   "author": {
     "id": 6,
     "email": "toru@prisma.io",
     "name": "Toru Takemitsu"
   }
   }
   ]

   This API call uses Prisma to get all posts in the database with their related authors. The code is in the pages/api/posts.js file.

Result

You have now tested the API for your application and added data to your database.

Steps

1. Click the Settings tab of your Vercel project.

2. Click Environment variables.

3. Add an environment variable with a key of DATABASE_URL and select only the Preview environment option:

   

4. Set the value to the connection string of your second PostgreSQL database. As before, the connection string has the following format:

   postgresql://__USER__:__PASSWORD__@__HOST__/__DATABASE__

5. Click Save.

Result

You should see the DATABASE_URL environment variable for the preview environment in your list of environment variables: