Next.js - How to setup & use Vercel Postgres (Serverless PostgreSQL database)

in this video you will learn how to set up and use Virtual postgres in a fresh next chess project of course you can use this also for existing projects but for this video we will use a fresh project so let's start by creating our project then let's open it up in vs code and next we want to add this project to Virtual and in order to do that let's first add it to GitHub and then connect it from GitHub to Virtual so I will go to GitHub and create a new Repository like this and click create and then I will copy this code over here in order to add the remote for our project and let's switch to the vs code open up the terminal paste in the code like this and now if we check GitHub refresh our repository we can see that the code is there great next let's connect this project to varsal so I will open up virtual.com new and I should see here my virtual postgres example project so I will click import and I will also just deploy it so now when I go to the dashboard I can see my project over here so let's click it open so now we have our project in Virtual so let's see how we can add the postgres for this project so I will actually open up a quick start guide for the virtual postgresp and if you scroll down a little bit we can see that we need to add the virtual postgres packets for our project so I will copy that switch to the vs code and paste in the code and install the dependency like this the next Let's see we want to create a postgres database so let's go to our project Universal and we can see we have this storage tab over here so let's click that open and I want to create new database and new postgres database like this continue and accept and let's give it a name like this and I will select the region and click create and continue and here we can select which environment we want to make this database available for and I will want to have them for all so let's click connect like this okay so now we should have the postgres database connected to our project and we can see if this worked by going to the settings of the project and over here we have the environment variables and we should see here some environment variables related to the postgres and you can see right here that they were added automatically in here so that's great so our project should be now connected so let me click back to the storage and open up the database so if we check the quick start guide again so we have created the database then we reviewed what what was created so we saw that we had the environment variables there so next we need to prepare our local project so in order for our local project to know where to connect when it tries to connect the postgres we need to add the environment variables that we just saw to our local project and one way to do this is by using the virtual CLI tool but I'm actually going to do it a bit differently so I'll go back to the project and the storage Tab and I have the postgres database open and down here I can see the dot end dot local file so here are all the environment variables that we need and I'm gonna click copy snippet and switch back to the vs code and create a local environment variable file like this and open it up and then just paste in the variables that we just copied like this so using the CLI tool like this would do the exact same thing but I just like to do it like this so let's save this and we can close that file and next let's see the quick start guide so let's populate some data to our database and then cure it so let's try to add this code snippet let's copy it to our API route and see if we can get it working so I copied that code snippet so it's back to the vs code and let's just open the hello API route over here and as you can see I used the pages folder for this example you could use the app directory also that works too but for this example I just decided to use the pages folder but yeah let's remove everything from from this API route and paste in our code snippet so let's save it and see what's going on in here so we are first importing DB from the virtual postgres dependency that we installed earlier then we need to get a database client and we can do it with the DP connect and then we try to create a table and then insert some data into it so we can use the client.sql to write some raw SQL queries and then after that we are going to query that data that we just inserted in here and then just return that data so let's try this out I'm saving it and then firing up the dev server and let's just see what happens so I'll open up the localhost 3000 and this is the front page and now let's try to hit that API route okay we get something not quite what I expected but let's see so looks like we are getting a bit more than we might want so we get all these other metadata but over here we have the rows and we can see that we have the one row that we inserted in there so looks like the data went in and we were also able to query it but let's actually see what happens if we refresh this page so we get a really clear error as you can see and I think this comes because if we check out the SQL again we are always when hitting this APR out we are running this SQL query so we are creating that new table every time so since that was the second time we run this table already existed and we couldn't create it so what I'm going to do is just add a few words in here like this so plain SQL we are creating the table if it doesn't exist already let's save this and see how it works now so I'll open the API route refresh the page and we again get the result and now we have two rows in here both with same data and that's because we are running this insert every time we are hitting this API route but yeah that's fine for now but one thing I want to do is just clean this output a little bit so let's just return the rows for this APR out so in here instead of returning the pets I will just return pits Dot rows like this save it and refresh the page and it looks like we are just getting the rows now so that's much cleaner so that's a super simple example on how to get started using the virtual postgres with your next test application if you are looking for some lighter solution than postgres for example some key value store for application virtual also has the virtual KV which is the versus key value database so if you want to learn how to set up and use that in your next test project watch this video over here next

Channel: Tuomo Kankaanpää

Views: 26,317

Keywords: vercel, vercel kv, vercel storage, vercel postgres, vercel blob, lee robinson, next.js, next js, nextjs, next js 13, vercel ship, tuomo kankaanpää, tuomo kankaanpaa, james q quick, chau, josh tried coding, josh tried coding nextjs, theo gg, web development, javascript, deploy to vercel, next vercel, nextjs tutorial, next js tutorial, redis, upstash, fauna

Id: _ad99LhxBeQ

Length: 7min 59sec (479 seconds)

Published: Thu May 04 2023