Deploy to Vercel

This tutorial will show how to deploy your project to Vercel, using GitHub Actions.

Getting started

If you haven't, follow Setup > NextJS guide first. You'll need the database migrations ready in your repository.

PosgreSQL Database

Before you start, you need to have a PostgreSQL database running on the cloud.

I recommend https://supabase.com/ to start since it's free, but feel free to use any other database provider.

If your database has a pooler https://supabase.com/docs/guides/database/connecting-to-postgres#connection-pooler, it's recommended to use it in the DATABASE_URL.

It's essential to add the ?pgbouncer=true at the end, to let Prisma know that it's using a pooler.

Here is an example:

DATABASE_URL="postgres://appuser.secret:[email protected]:6543/postgres?pgbouncer=true"
DATABASE_MIGRATION_URL="postgresql://postgres:[email protected]:5432/postgres?schema=public"
DATABASE_NAME="postgres"
DATABASE_APP_PASSWORD="secret"
DATABASE_APP_USER="appuser"
DATABASE_SCHEMA="public"

GitHub Respotiory

Go to https://github.com/ and create a new repository. Make sure the repository is private.

Relate the downloaded codebase to this repository.

Vercel

Go to https://vercel.com/ and create a new project.

Choose to import the project you just created on GitHub.

On Framework Preset, select NextJS.js if it's not by default.

On Environment Variables, add the Environment Variables following the Setup > NextJS guide.

The subsequent deployments will be via GitHub Actions because it allows us to run unit tests and deploy migrations before deploying the application.

1. Retrieve your Vercel Access Token

2. Install the Vercel CLI and run vercel login

3. Inside your folder, run vercel link to create a new Vercel project

4. Inside the generated .vercel folder, save the projectId and orgId from the project.json

5. Inside GitHub, add VERCEL_TOKEN, VERCEL_ORG_ID, and VERCEL_PROJECT_ID as secrets.

GitHub Secrets

Go back go GitHub and then go to Settings > Secrets and Variables > Actions and create a few New Repository Secrets.

• VERCEL_ORG_ID - This is the Vercel Organization ID that you just got.

• VERCEL_PROJECT_ID - This is the Vercel Project ID that you just got.

• VERCEL_TOKEN - The Vercel token you just got.

• DATABASE_URL - This should be the connection URL the application will use to connect to the database via bouncer. In our example it would be: postgres://appuser.secret:[email protected]:6543/postgres?pgbouncer=true"

• DATABASE_MIGRATION_URL - This is the connection URL GitHub will use to connect to the database to run the migrations. In our example, this would be: postgresql://postgres:[email protected]:5432/postgres?schema=public.

• DATABASE_NAME

• DATABASE_SCHEMA

• DATABASE_APP_PASSWORD - This is the password for the application user. The migration scripts create the application user, so that's why the password is required.

Done!

After you push the latest code to the repo, the tests and deployment will be triggered.