Skip to content

Deploy to Vercel

Let's try out the new PlanetScale integration for Vercel!

Introduction

In this tutorial, we're going to deploy a Next.js application with a PlanetScale database to Vercel, using the PlanetScale integration for Vercel. As a bonus, we've included the sample application code in this tutorial. We'll walk you step-by-step through creating a new PlanetScale database, deploying your application to Vercel, and using the Vercel integration. Excited? Let's go!

Prerequisites

  • Install the PlanetScale CLI.
  • Authenticate the CLI with the following command:
Copied
pscale auth login

Setup a PlanetScale database

Now we're ready to start our adventure. Let's begin by setting up our PlanetScale database with a small sample table.

  1. Create a new PlanetScale database:
Copied
pscale database create <database>
  1. Create a new development branch:
Copied
pscale branch create <database> <branch>
  1. Connect to your database to make a non-blocking schema change:
Copied
pscale shell <database> <branch>
  1. Create the following example table:
Copied
CREATE TABLE `users` (
`id` int NOT NULL AUTO_INCREMENT PRIMARY KEY,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL,
`name` varchar(255)
);
  1. Create a deployment request by running:
Copied
pscale deploy-request create <database> <branch>
  1. Deploy the deploy request:
Copied
pscale deploy-request deploy <database> <deploy-request-number>
  • To find your deploy-request-number, simply run:
Copied
pscale deploy-request list <database>

Copy the value from NUMBER and use that digit as your deploy-request-number.

  1. Merge your development branch into main:
Copied
pscale deploy-request deploy <database> <deploy-request-number>

Deploy to Vercel

We mentioned earlier that we had included a sample Next.js application in this tutorial for you to deploy to Vercel. This demo application creates a user with a name, email address, and password. In this section, we're going to connect the Git repository of our sample application to Vercel.

  1. Click the following Vercel Deploy button:
Deploy with VercelDeploy with Vercel

Vercel offers the option to clone our repository into GitHub, GitLab, or Bitbucket. In this tutorial, we're using GitHub.

  1. Click the Create button to create your new Git repository.

Add Vercel integration

We're almost done! The final thing we need to do is add a Vercel integration to our PlanetScale database.

  1. Click the Add button to add the PlanetScale integration to this Vercel project.
Make sure you pick the same database that you created in the earlier part of this tutorial, so that it has the right schema.

This step automatically runs your first Vercel deployment.

Every push to main will automatically deploy your application in Vercel.

Once added, the integration creates a service token for your PlanetScale database and adds the necessary environment variables to your Vercel project:

Copied
PLANETSCALE_DB
PLANETSCALE_DB_USERNAME
PLANETSCALE_DB_PASSWORD
PLANETSCALE_DB_HOST
PLANETSCALE_SSL_CERT_PATH
PLANETSCALE_ORG
PLANETSCALE_TOKEN
PLANETSCALE_TOKEN_NAME
Removing Vercel integrations:
  • Environment variables are removed from all projects tied to the integration.
  • All service tokens are destroyed and your application will no longer be able to connect to your PlanetScale database.

Updating Vercel integration permissions:
  • Old service tokens are removed in deleted projects.
  • New service tokens are created and environment variables are added to the project(s).
  • New projects should have access to the PlanetScale database tied to the integration after installation is done.

All done! Congratulations on successfully deploying your application with a PlanetScale database to Vercel.

Summary

In this tutorial, we deployed a Next.js application that was connected to a PlanetScale database to Vercel. We chose to use the sample Next.js application we built in this tutorial and then used it to connect to a PlanetScale database.

What's next?

Now that you've successfully deployed an application to Vercel, it's time to make more schema changes to your tables! Learn more about how PlanetScale allows you to make non-blocking schema changes to your database tables without locking or causing downtime for production databases.

Need help?

Get help from PlanetScale's support team, or join our GitHub Discussion board to see how others are using PlanetScale.

Was this page useful?
Last updated on October 15, 2021
Help us improve this page
PrivacyTerms© 2021 PlanetScale Inc.