Here, I am setting up a PostgreSQL database using @vercel/postgres.
Vercel
In Vercel, select and import a GitHub repository. Name your project and click Deploy. By connecting your GitHub repository, whenever you push changes to your main branch, Vercel will automatically redeploy your application.
Create a Postgres database
Next, to set up a database, click Continue to Dashboard and select the Storage tab from your project dashboard. Select Connect → Store → Create New → Postgres → Continue.
Assign a name to your database and set your database region. By placing your database in the same region or close to your application code, you can reduce latency for data requests. Washington D.C (iad1) is the default region for all new Vercel projects
Learn more about latency here.
Tip: You cannot change the database region once it has been initalized. If you wish to use a different region, you should set it before creating a database.
Once connected, navigate to the .env.local tab, click Show secret and Copy Snippet. Make sure you reveal the secrets before copying them.
Navigate to your code editor and paste in the copied contents from Vercel.
Database Secrets
Important: Go to your .gitignore file and make sure .env is in the ignored files to prevent your database secrets from being exposed when you push to GitHub.
Finally, run npm i @vercel/postgres in your terminal to install the Vercel Postgres SDK
Seed the database
Seeding the database with some initial data will allow you to have some data to work with as you build the dashboard.
In /scripts/seed.js, the script uses SQL to create the tables, and the data from placeholder-data.js file to populate them after they’ve been created.
In package.json
“scripts“: {
“build“: “next build“,
“dev“: “next dev“,
“start“: “next start“,
“seed“: “node -r dotenv/config ./scripts/seed.js“
},
This is the command that will execute seed.js.
After running npm run seed, you should see some console.log messages in your terminal to let you know the script is running.
Troubleshooting:
Make sure to reveal your database secrets before copying it into your .env file.
The script uses bcrypt to hash the user’s password, if bcrypt isn’t compatible with your environment, you can update the script to use bcryptjs instead.
If you run into any issues while seeding your database and want to run the script again, you can drop any existing tables by running DROP TABLE tablename in your database query interface. See the executing queries section below for more details.
Warning
Be careful, this command will delete the tables and all their data. It’s ok to do this with your example app since you’re working with placeholder data, but you shouldn’t run this command in a production app.
Exploring your database
Let’s see what your database looks like. Go back to Vercel, and click Data on the sidenav.
In this section, you’ll find the tables. By selecting each table, you can view its records and ensure the entries align with the data from placeholder-data.js file.
Executing queries
You can switch to the query tab to interact with your database. This section supports standard SQL commands. For instance, inputting DROP TABLE customers will delete “customers” table along with all its data – so be careful!
You can view my commits on GitHub:
