在写这篇文章的时候，一直没有找到合适的歌曲作为本文章的配乐，最后思前想后，还是决定用 Dua Lipa 的歌吧。

前言

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 是一个全栈框架的证明。