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 video analysis...