Skip to content

Connect a Next.js application to PlanetScale

Spin up a PlanetScale MySQL serverless database in seconds and connect to a Next.js application

In this tutorial, you'll create a Next.js application that uses Tailwind CSS for styling and Prisma to connect to a PlanetScale database.

Prerequisites

Copied
pscale auth login

Set up the database

Create a new database with the following command:

Copied
pscale database create <DATABASE_NAME>
Note

A branch, main, was automatically created when you created your database, so you can use that for BRANCH_NAME in the steps below.

Set up the starter Next.js app

Clone the starter repository.

Copied
git clone https://github.com/planetscale/nextjs-starter

Install the dependencies.

Copied
cd nextjs-starter
npm install

Next, you'll need to create a database username and password through the CLI to connect to your application. If you'd prefer to use the dashboard for this step, you can find those instructions in the Connection Strings documentation and then come back here to finish setup.

First, create your .env file by renaming the .env.example file to .env:

Copied
mv .env.example .env

Next, using the PlanetScale CLI, create a new username and password for the branch of your database:

Copied
pscale password create <DATABASE_NAME> <BRANCH_NAME> <PASSWORD_NAME>
Note

The PASSWORD_NAME value represents the name of the username and password being generated. You can have multiple credentials for a branch, so this gives you a way to categorize them. To manage your passwords in the dashboard, go to your database overview page, click "Settings", and then click "Passwords".

Take note of the values returned to you, as you won't be able to see this password again.

Copied
Password production-password was successfully created.
Please save the values below as they will not be shown again
NAME USERNAME ACCESS HOST URL ROLE PASSWORD
--------------------- -------------- ----------------------------------- ------------------ -------------------------------------------------------
production-password xxxxxxxxxxxxx xxxxxx.us-east-2.psdb.cloud Can Read & Write pscale_pw_xxxxxxx

You'll use these properties to construct your connection string, which will be the value for DATABASE_URL in your .env file. Update the DATABASE_URL property with your connection string in the following format:

Copied
mysql://<USERNAME>:<PASSWORD>@<ACCESS_HOST_URL>/<DATABASE_NAME>?sslaccept=strict

Push the database schema to your PlanetScale database using Prisma.

Copied
npx prisma db push

Run the seed script to populate your database with Product and Category data.

Copied
npm run seed

Run the app

Run the app with following command:

Copied
npm run dev

Open your browser at localhost:3000 to see the running application.

Deploying

After you've got your application running locally, it's time to deploy it. To do so, you'll need to promote your database branch (main by default) to be the production branch (read the branching documentation for more information).

Copied
pscale branch promote <DATABASE_NAME> <BRANCH_NAME>

Now that your branch has been promoted to production, you can either use the existing password you generated earlier for running locally or create a new password. Regardless, you'll need a password in the deployment steps below.

Choose one of the following deploy buttons and make sure to update the DATABASE_URL variable during this setup process.

Deploy on Vercel

Deploy with VercelDeploy with Vercel

Walk through the steps listed on the Vercel deployment page. For more in depth instructions, see our Deploy to Vercel documentation.

Deploy on Netlify

*Note: The Netlify.toml file in this repository includes the configuration for you to customize the DATABASE_URL property on the initial deploy.

Deploy to NetlifyDeploy to Netlify

Follow the instructions on the Netlify deploy page. For more in depth instructions, see our Netlify deployment documentation.

Learn more

To learn more about PlanetScale, take a look at the following resources:

What's next?

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. If you're interested in learning how to secure your application when connecting to PlanetScale, please read Connecting to PlanetScale securely.

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.