LongCut logo

How to Integrate a Postgres Database in your Vercel & NextJS Projects

By Prisma

Summary

## Key takeaways - **Three Ways to Deploy Prisma Postgres**: There are a couple different ways to deploy a new Prisma Postgres database: through console.prisma.io by creating a new project, via npx prisma init --db on the command line, or directly in Vercel via the integrations marketplace. [00:00], [00:32] - **Vercel Marketplace Prisma Postgres Integration**: In Vercel integrations area, search for Prisma to find Prisma Postgres, install it to create a Prisma data platform account if needed, and wire up the database in your Vercel project. [00:41], [00:54] - **Deploy Next.js Prisma Postgres Starter**: Use the Next.js and Prisma Postgres starter template in Vercel: it clones the repo to your GitHub, adds storage with Prisma Postgres, selects region and free plan, then deploys with database connected. [01:07], [02:12] - **Pull Vercel Env Vars for Local Setup**: After cloning the repo locally, run vercel link to connect to your project, then vercel env pull to download environment variables including the database URL into .env.local. [04:26], [05:06] - **Run Migrations and Seed Locally**: With schema models in place, execute npx prisma migrate dev --name init to migrate, then npx prisma db seed to populate data, making it appear in the deployed app. [05:39], [05:56] - **View Data in Prisma Studio**: Run npx prisma studio to open Prisma Studio at localhost:5555, where you can view and interact with your Post and User models from the Postgres database. [06:14], [06:23]

Topics Covered

  • Deploy Prisma Postgres Three Ways
  • Vercel Marketplace Instantiates Prisma Postgres
  • Pull Vercel Env Vars for Local Prisma Setup
  • Migrate Seed Prisma Schema via CLI

Full Transcript

There are a couple different ways to deploy a new Prisma Postgress database.

And it's very simple no matter how we do it. We could be here at

it. We could be here at console.prisma.io. So in the Prisma

console.prisma.io. So in the Prisma console, we can click to a new project and then we'll just give our project a name. We'll choose Prisma Postgress.

name. We'll choose Prisma Postgress.

Pick a region and we're basically done at that point. We can also get a Prisma Postgress database in the command line when we new up Prisma in a project. So

for example, npx prisma init. Normally

we do this to get Prisma in our project.

We can now pass- DB to get a Prisma Postgress database along the way. And

now there's an option for us to get a Prisma Postgress database created for us directly in Verscell if we happen to be using Verscell. So I'm over here at

using Verscell. So I'm over here at versell.com. I'm in my account in the

versell.com. I'm in my account in the integrations area. We can go to browse

integrations area. We can go to browse marketplace and if we search for Prisma, we get this Prisma Postgress. So let's

check it out. So this integration here allows us to click through to install.

It's going to take us through the steps of creating a Prisma data platform account if we need one. And then we will be able to get a Prisma Postgress database all wired up in our Versell project. We also have the option to use

project. We also have the option to use this template right down here. We've got

this Nex.js and Prisma Postgress Ostarter. Let's try deploying this and

Ostarter. Let's try deploying this and we'll see how all of this comes together. So this is a starter example

together. So this is a starter example project that's available in the Prisma examples. We can select where we want to

examples. We can select where we want to put this repository because it's going to clone this repository and put it somewhere that we can access it and that's going to be at my GitHub account.

I'll leave Prisma Postgress as the repo name and let's choose to create. All right, so next step add

create. All right, so next step add products. We've got storage and this is

products. We've got storage and this is of course what we want. Let's add Prisma Postgress. We can choose to create a new

Postgress. We can choose to create a new account. Let's do accept and create.

account. Let's do accept and create.

And then we're stepped through some options that we might see if we're creating a Prisma Postgress database directly in the Prisma data platform. So

the region I'm going to stick with this one. This is US East1. Then the plan

one. This is US East1. Then the plan down here I'm going for the free plan.

And we can choose to continue. Database

name just leave what's there if we want to or we can do Prisma versel to get more specific. And let's

more specific. And let's create. All right. Cool. Database has

create. All right. Cool. Database has

been successfully created. Let's click

done here. And then we get some options for configuring the environment. So if

we're working with versel, we've got options for having different environment variables at different levels. So

development, preview or production. We

can also take a look at some advanced options down here. But I think this is good for now. Let's go through and connect. All right, connected project

connect. All right, connected project Prisma Postgress to database. Perfect.

And the deployment is running now. So

this is taking that example application and it's deploying it to Verscell. We're

going to have the connection to our Prisma Postgress database all established already once this goes through. All right, so skipping ahead to

through. All right, so skipping ahead to the finished deployment. Here it is.

We've got a preview of it. We can click in to see what we've got. And so this is the example project. We get some instructions here on how we can get some data in place because right now if we go

up to posts, there's no post available.

And that's because the database hasn't been migrated yet. There's no initial migrations in place. There's no initial data in place. So why don't we get set up with that next? And in this context here, because we chose to start with an

example project, we have to go get that project, pull it down, and then run some things there. All right, so here we are

things there. All right, so here we are in GitHub. This is the project that got

in GitHub. This is the project that got created by way of us using that template. It got created on my GitHub

template. It got created on my GitHub account. So we're going to pull this

account. So we're going to pull this down locally. Let's come up here and

down locally. Let's come up here and copy the URL to the clipboard. So over

in the terminal, then we can do a get clone. Get clone pass that URL. And then

clone. Get clone pass that URL. And then

Prisma Postgress comes down. Let's CD

into it. Prisma Postgress and we'll open that up. All right, so let's take a look at

up. All right, so let's take a look at the instructions here in the example project. Here's how to get started with

project. Here's how to get started with this super blog example. Let's do npm install as the first step. npm

install. All right, cool. So that has wrapped up. We've got all of our npm

wrapped up. We've got all of our npm dependencies. Let's take a look at

dependencies. Let's take a look at what's next. If we were going to create

what's next. If we were going to create a new Prisma Postgress database at this point, then we want to enit Prisma using-db to get that new database. But

we already have our database. So let's

just set up our environments and we can pull down our database URL. And here's

how we might do that. Let's go back over here. We'll do a

here. We'll do a touch.env to get our env file. We can

touch.env to get our env file. We can

then use the Verscell CLI to bring down the environment variable that points to our Prisma Postgress database, the connection string to our Prisma Postgress database. I've got the

Postgress database. I've got the Verscell CLI installed here. We've got

Verscell ready to go. And with the Versel CLI installed, if we're logged into it, we can link up to our project.

For example, we can do versel link.

We'll step through all the prompts here.

We can do setup. Yes, we want to do that. We want my projects. And we've got

that. We want my projects. And we've got this Prisma Postgress project to link.

Let's link that. All right. So, it has been linked. We have got this versel

been linked. We have got this versel directory here. And what we want to do

directory here. And what we want to do now is get some environment variables from our project, our deployed project pulled down here. For that, let's take a look at what we've got. If we do versel

env. So let's try pulling down the

env. So let's try pulling down the environment variable. We can do versel

environment variable. We can do versel env pull. All right. So that brought our

pull. All right. So that brought our environment variable down to env.local.

We've got our database URL in there. So

let's copy this actually and put it into our regularv file. And now we're ready to start to run migrations for our project. All right. All right. So, what

project. All right. All right. So, what

we need to do first though is check to see in our Prisma directory that we've got something here in our schema. We

have got our user model. We have got our post model. So, this is the sample stuff

post model. So, this is the sample stuff that comes with this project. Let's see

if we can run these migrations and then seed the database with what we've got here in our seed script. All right. So,

npx prisma migrate dev with a name of init. All right. So, we have migrated.

init. All right. So, we have migrated.

We've got our migrations directory there. Let's do the seed now. npx prisma

there. Let's do the seed now. npx prisma

dbc seed. All right, the seed command has

seed. All right, the seed command has been executed. Let's take a look now in

been executed. Let's take a look now in the deployed application. So if we're back over here in the example and we go to posts, there we go. We've got some data on the screen. Now we have got a number of example posts. All of this

here came through the seed command that we executed. So we can interact with

we executed. So we can interact with this application and we can delete things. We can view the different posts

things. We can view the different posts that are here. And of course, if we want to view this data in studio in Prisma Studio, we can do that as well. Down

here, npx prisma studio. And that's going to open up

studio. And that's going to open up studio at localhost 5555. We've got our post, our user model there. And we are good to go. So, we have got a connection to our Prisma Postgress database that

all came through Verscell through the Verscell marketplace with a Prisma Postgress integration that is now available and ready to use. So this

should come in handy if you're working with Verscell for your deployments and you want to use Prisma Postgress for your database. Give it a try and let us

your database. Give it a try and let us know how it goes. You can reach out to us. We're at prisma.io on the web or at

us. We're at prisma.io on the web or at prisma on Twitter. And if you enjoyed this video, we'd love if you'd hit subscribe. That'll help us to get you

subscribe. That'll help us to get you more great Prisma content. And if you want to join the discussion on Discord, you can do so as well. There's a link for that in the description. Thanks for

watching.

Loading...

Loading video analysis...