Create a Next.js App with a MySQL Database That Builds and Deploys with Vercel

In this guide, we will walk you through creating and deploying a Next.js app with the most popular open source database in the world, MySQL, on Vercel.

Next.js from Vercel is a production-ready framework that can help you create fast React apps. By using it along with MySQL, you can create a fast, modern web app that interacts with customer data in a performant manner.

We demonstrate the set up via an example app, that let's you create, read, update, and delete journal entries. The finished app can be found at https://next-mysql.vercel.app.

Step 1: Set Up Your Project

Create a new Next.js project using the with-mysql template and enter the newly created directory:

npx create-next-app --example with-mysql next-mysql  && cd next-mysql

Creating a new Next.js project from with-mysql template and entering /next-mysql directory.

Step 2: Migrating MySQL Database Schema

Create MySQL Remote Instance

To use this guide, you will need to setup a remote MySQL database. Many cloud providers offer this service, such as Digital Ocean, Amazon Web Services and Google Cloud. Most of them offer a free trial.

Once you have your remote MySQL database setup, you should make a note of your database credentials:

• Database name
• Database hostname
• Database username
• Database password

Environment Variables

When you scaffolded the with-mysql Next.js example, your project came with a .env.local.example file. Make a new file named .env.local with contents copied from .env.local.example.

cp .env.local.example .env.local

Copying contents from .env.local.example into a new file named.env.local.

In your .env.local file, fill in the values for your MySQL credentials that you made note of when creating your instance.

An example of what your file should look like after providing the values is shown below:

MYSQL_HOST=exampledatabasehost.com
MYSQL_DATABASE=db
MYSQL_USERNAME=john_doe
MYSQL_PASSWORD=topsecretpassword

Example of .env.local contents.

Then, you can run the migration script to create the entries table according to the following schema:

• id number
• title string
• content string
• created_at timestamp
• updated_at timestamp

npm run migrate

Copying contents from .env.example into a new file named.env.local.

You should see a success message if the migration ran successfully. If you got an error, please double check your credentials.

Step 3: Development

With everything wired up, you can start a local development server and interact with your database. The project template gives you a fully complete CRUD application with Next.js API routes.

npm run dev

Starting up the Next.js development server.

Step 4: Deploy Your Project with Vercel

Finally, deploy the app with Vercel.

To deploy your Next.js + MySQL app with a Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.