将 MySQL 数据库连接到 Next.js
6 个主章节
在这篇文章中，Jim 将介绍如何在 Next.js 项目中连接 MySQL 数据库，并通过 API 路由来获取数据库中的数据。我们将使用 mysql2 库来连接 MySQL 数据库，并在前端页面中展示从数据库中获取的数据。
前言
Jim 曾经在《Cheerio.js 爬虫与 Next.js API 路由》一文中提到过，next.js 是一个全栈框架，因为它支持 API 路由，可以直接在 next.js 项目中创建 API 接口，而不需要额外的配置。
今天，我们就来用一个在生产环境中很常见的例子——连接 MySQL 数据库，来证明 next.js 是一个全栈框架。
在开始之前：环境配置
在开始之前，我们需要先配置好环境，包括 next.js 和 mysql。因为本博客就基于 next.js 框架，而且既然读者点进来阅读了这篇文章，那肯定也是已经有 next.js 开发经验了，所以 Jim 就不再赘述 next.js 的环境配置，直接进入正题。
省点事，我们只在 MacOS 上完成：
$ brew install mysql
$ brew services start mysql
$ mysql -u root这样的话，我们就可以通过 mysql 命令行工具（Command Line Interface, CLI）来进行数据库操作了。
第一步：进行简单的数据库操作
为了方便，也是为了照顾本文的重点，我们就用 MySQL CLI 创建个数据库，然后剩下有关子表和数据的操作，我们用开源图形化工具 DBeaver Community 来完成。
那么我们就先创建一个数据库，叫 test：
mysql> CREATE DATABASE test;
mysql> USE test;（插入 DBeaver 截图）
第二步：在后端 API 路由中连接数据库
很抱歉，这里使用的是 next.js 13 版本，所以主页面都在 app/ 中，而不是 pages/ 中，但是问题不大。
首先，我们需要做后端 API 路由的配置，这里我们在不管那么多，还是在 pages/ 里进行 API 操作。在 pages/api/ 中创建一个 getData.js 文件，作为我们的后端 API 路由：
// pages/api/getData.js
import mysql from 'mysql2/promise';
export default async function getData(req, res) {
const connection = await mysql.createConnection({
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE,
});
try {
const [rows] = await connection.query('SELECT * FROM your_database');
res.status(200).json(rows);
} catch (e) {
res.status(500).json({ message: e.message });
};
};这就是我们的后端 API 路由，它会连接到我们的数据库，然后查询 your_database 表中的所有数据，并返回给前端。
但是，我们还需要在 next.config.js 中配置一下环境变量，这样才能让 next.js 项目知道我们的数据库信息：
// next.config.js
module.exports = {
env: {
DB_HOST: process.env.DB_HOST,
DB_USER: process.env.DB_USER,
DB_PASSWORD: process.env.DB_PASSWORD,
DB_DATABASE: process.env.DB_DATABASE,
},
}第三步：在前端页面中调用 API
现在，我们就可以在前端页面中调用 API 了。回到 app/ 中，我们直接在 page.js 中调用 API：
// app/page.js
async function getData() {
const res = await fetch('http://localhost:3000/api/getData');
const data = await res.json();
return data;
}
export default async function Home() {
const data = await getData();
return (
<>
<div>
<h1>Data from MySQL:</h1>
<ul>
{data.map((row) => (
<li>
{row.column1 + ' ' + row.column}
</li>
))}
</ul>
</div>
</>
)
}这样，我们就可以在前端页面中调用 API 了，而且这个 API 是连接到 MySQL 数据库的，所以我们就可以在前端页面中展示数据库中的数据了。
总结
这就是全部内容了，我们通过 next.js 的 API 路由，连接到了 MySQL 数据库，并且在前端页面中展示了数据库中的数据。这就是 next.js 是一个全栈框架的证明。