Create a Next.js App with a MySQL Database That Builds and Deploys with Vercel
Deploy your Next.js and MySQL app with Vercel in a serverless environment.
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.