Next JS 14 | Setting Up Your Database
Tags: webdev, nextjs, database, vercel
Published: 2024-03-20 17:24:12

In this chapter
Here are the topics we’ll cover:
🐱 Push your project to GitHub.
🔺 Set up a Vercel account and link your GitHub repo for instant previews and deployments.
🔗 Create and link your project to a Postgres database.
𝌏 Seed the database with initial data. 

**Create a GitHub repository**

To start, let's push your repository to Github if you haven't done so already. This will make it easier to set up your database and deploy.

If you need help setting up your repository, take a look at [this guide on GitHub](https://help.github.com/en/github/getting-started-with-github/create-a-repo).

**Create a Vercel account**

Visit [vercel.com/signup](https://vercel.com/signup) to create an account. Choose the free "hobby" plan. Select Continue with GitHub to connect your GitHub and Vercel accounts.

**Connect and deploy your project**

Next, you'll be taken to this screen where you can select and **import** the GitHub repository you've just created:

![Importing GitHub Repo to Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sn5n7zlj5u8wav35tww.png)

Name your project and click **Deploy**.

![Name your project and Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olx2n5ww2q4s2hv9bms3.png)

Hooray! 🎉 Your project is now deployed.

![Deployed](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ujaf4urp3uyqx1tavhy.png)

By connecting your GitHub repository, whenever you push changes to your main branch, Vercel will automatically redeploy your application with no configuration needed. When opening pull requests, you'll also have [instant previews](https://vercel.com/docs/deployments/preview-deployments#preview-urls) which allow you to catch deployment errors early and share a preview of your project with team members for feedback.

**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**.

![Connect database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg18mbh2dtka7bfd1gj8.png)

Accept the terms, assign a name to your database, and ensure your database region is set to **Washington D.C (iad1)** - this is also the [default region](https://vercel.com/docs/functions/serverless-functions/regions#select-a-default-serverless-region) for all new Vercel projects. By placing your database in the same region or close to your application code, you can reduce [latency](https://developer.mozilla.org/en-US/docs/Web/Performance/Understanding_latency) for data requests.

![Create postgres database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yth2wyq7q58x7yetcos5.png)

Once connected, navigate to the `.env.local` tab, click **Show secret** and **Copy Snippet**. Make sure you reveal the secrets before copying them.


![Get the secrets for env](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqwvlqp7vke74bwhfrqb.png)

Navigate to your code editor and rename the `.env.example` file to `.env`. Paste in the copied contents from Vercel.

**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](https://vercel.com/docs/storage/vercel-postgres/sdk).

**Seed your database**

Now that your database has been created, let's seed it with some initial data. This will allow you to have some data to work with as you build the dashboard.

In the `/scripts` folder of your project, there's a file called `seed.js`. This script contains the instructions for creating and seeding the invoices, customers, user, revenue tables.

The script uses SQL to create the tables, and the data from `placeholder-data.js` file to populate them after they've been created.

Next, in your `package.json` file, add the following line to your scripts:

```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`.

Now, run `npm run seed`. You should see some `console.log` messages in your terminal to let you know the script is running.

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 four new tables: users, customers, invoices, and revenue.


![exploring database](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcbgmsg9youbgelkru8b.png)

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!**

Let's run your first database query. Paste and run the following SQL code into the Vercel interface:

```sql
SELECT invoices.amount, customers.name
FROM invoices
JOIN customers ON invoices.customer_id = customers.id
WHERE invoices.amount = 666;
```

Check out the video: {% youtube vc_evtMq11k%}

Support me: Like, Share and Subscribe!