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.
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
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
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
cp .env.local.example .env.local
.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
Then, you can run the migration script to create the
entries table according to the following schema:
npm run migrate
You should see a success message if the migration ran successfully. If you got an error, please double check your credentials.
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
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.