Skip to content

Deploy to Vercel

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

This sample repo uses Next.js 10 and is in the process of being updated. If you'd like to see the most updated version with Vercel deployment, check out our Next.js Quickstart.

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_NAME>

This creates a database with one default branch, main, which we'll use as the production branch.

  1. For development, create a new development branch:
Copied
pscale branch create <DATABASE_NAME> <BRANCH_NAME>
  1. Connect to your database to make a non-blocking schema change:
Copied
pscale shell <DATABASE_NAME> <BRANCH_NAME>
  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. Before making a deploy request, you need a production branch. Promote your main branch to production:
Copied
pscale branch promote <DATABASE_NAME> <BRANCH_NAME>
  1. Create a deployment request by running:
Copied
pscale deploy-request create <DATABASE_NAME> <BRANCH_NAME>

Copy the deploy-request-number and use that digit as your DEPLOY_REQUEST_NUMBER.

  1. Merge your development branch into main:
Copied
pscale deploy-request deploy <DATABASE_NAME> <DEPLOY_REQUEST_NUMBER>
  1. (Optional) Delete your just merged feature branch:

If you are working in a feature branch workflow, you may want to delete the old branches:

Copied
pscale branch delete <DATABASE_NAME> <BRANCH_NAME>

Note: It could ask you for confirmation unless you provide the --force flag

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

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.

Tip

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
Note
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 May 3, 2022
Help us improve this page
PrivacyTerms© 2022 PlanetScale Inc.