Samuel Lubliner

Posted on Apr 4, 2024 • Edited on Apr 30, 2024

Setting Up Your Database (Next.js)

#webdev #nextjs #database

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. Connecting your GitHub repository will automatically redeploy your application, whenever you push changes to your main branch.

Create a Postgres 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 the region. Place your database in a nearby region to reduce latency for data requests. Learn more about latency here.

Tip: You cannot change the database region once it has been initialized. To use a different region, set it before creating a database.

Once connected, navigate to the .env.local tab, click Show secret and Copy Snippet. Paste the contents into your code editor.

Database Secrets

Important: Don't expose database secrets when you push to GitHub. In .gitignore, make sure .env is in the ignored files. Finally, run npm i @vercel/postgres to install the Vercel Postgres SDK

Seed the database

Seeding the database allows you to have some data to work with as you build the dashboard.

/scripts/seed.js uses SQL to create the tables. The data from placeholder-data.js file populates them.

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.

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 want to run the script again, you can drop any existing tables by running DROP TABLE tablename in your database query interface.

Warning

Be careful, this command will delete the tables and all their data. Do not run this command in a production app.

Exploring your database

In Vercel click Data on the sidenav. By selecting each table, you can view its records and ensure the entries align with the data from placeholder-data.js file.

Executing queries

Switch to the query tab to interact with your database. This section supports SQL commands.

DEV Community