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.
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!
- Install the PlanetScale CLI.
- Authenticate the CLI with the following command:
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.
- Create a new PlanetScale database:
This creates a database with one default branch,
main, which we'll use as the production branch.
- For development, create a new
- Connect to your database to make a non-blocking schema change:
- Create the following example table:
- Before making a deploy request, you need a production branch. Promote your
mainbranch to production:
- Create a deployment request by running:
deploy-request-number and use that digit as your
- Merge your
- (Optional) Delete your just merged feature branch:
If you are working in a feature branch workflow, you may want to delete the old branches:
Note: It could ask you for confirmation unless you provide the
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.
- Click the following Vercel Deploy button:
Vercel offers the option to clone our repository into GitHub, GitLab, or Bitbucket. In this tutorial, we're using GitHub.
- 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.
- 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:
- 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.
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.
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.