在 **Next.js** 中使用 `mysql2` 连接 MySQL 数据库并查询 `xxx` 表的数据

在 Next.js 中使用 mysql2 连接 MySQL 数据库并查询 Company 表的数据，可以按照以下步骤实现：

---

1. 安装 mysql2

首先，安装 mysql2 依赖：

npm install mysql2
# 或
yarn add mysql2

---

2. 创建数据库连接池

在 lib/mysql.js（或 utils/db.js）中创建 MySQL 连接池（推荐使用连接池提高性能）：

// lib/mysql.js
import mysql from 'mysql2/promise'; // 使用 Promise 版本

const pool = mysql.createPool({
  host: process.env.DB_HOST || 'localhost', // 数据库地址
  user: process.env.DB_USER || 'root',     // 数据库用户名
  password: process.env.DB_PASSWORD || '', // 数据库密码
  database: process.env.DB_NAME || 'your_database', // 数据库名
  waitForConnections: true,
  connectionLimit: 10, // 连接池大小
  queueLimit: 0, // 无限制排队
});
export default pool;

SQL是一种用于管理和操作 关系型数据库 的语言，而MySQL则是基于SQL的一种具体的数据库管理 系统
myaql

SQL

说明：

• 使用 mysql2/promise 支持 async/await。
• 推荐使用 .env 文件存储敏感信息（如 DB_HOST、DB_USER）。

---

3. 创建 API 路由查询数据

在 pages/api/company.js 中创建 API 路由，查询 dbo.Company 表的数据：

App Router 和 Pages Router 不同写法

注意:

有的报错405： App Router（app/ 目录）的 API 路由必须用命名导出 export async function

GET() export default handler 是旧的 Pages Router 写法，在 app/ 目录下完全不工作，所以返回
405

// pages/api/company.js
import pool from '../../lib/mysql';

export default async function handler(req, res) {
  try {
    //查 SHOW TABLES 来确认真实表名，临时改一下 --获取该数据库下是表名
    //const [rows] = await pool.query('SHOW TABLES');
    // 查询 Company 表的所有数据
    const [rows] = await pool.query('SELECT * FROM Company');

    res.status(200).json({
      success: true,
      data: rows,
    });
  } catch (error) {
    console.error('Database query error:', error);
    res.status(500).json({
      success: false,
      message: 'Failed to fetch company data',
    });
  }
}

或者

export async function GET() {
    try {
        const [rows] = await pool.query('SHOW TABLES');
        // const [rows] = await pool.query('SELECT * FROM equipment_info');
        console.log({rows});
        return Response.json({ data: rows })
    } catch (error) {
        return Response.json({ message: error.message }, { status: 500 })
    }
}

多查询--用查询参数区分（推荐，更灵活）

export async function GET(request) {
    const { searchParams } = new URL(request.url)
    const type = searchParams.get('type')  // ?type=user 或 ?type=equipment

    try {
        let rows
        if (type === 'user') {
            [rows] = await pool.query('SELECT * FROM user LIMIT 20')
        } else if (type === 'equipment') {
            [rows] = await pool.query('SELECT * FROM info LIMIT 20')
        } else {
            return Response.json({ message: 'type 参数缺失' }, { status: 400 })
        }
        return Response.json({ data: rows })
    } catch (error) {
        return Response.json({ message: error.message }, { status: 500 })
    }
}

调用时：

/api/testapi?type=user

/api/testapi?type=equipment
不同 HTTP 方法查不同数据

export async function GET() { /* 查 user */ }
export async function POST() { /* 查 equipment */ }

说明：

• pool.query() 返回 [rows, fields]，rows 是查询结果。
• 使用 try/catch 捕获数据库错误。

---

4. 在前端调用 API 获取数据

在 Next.js 页面（如 pages/company.js）中调用 API 获取数据：

创建路由文件// pages/company.js或// pages/company/route.js
Next.js API 路由文件命名对比详情链接

// pages/company.js
import { useState, useEffect } from 'react';

export default function CompanyPage() {
  const [companies, setCompanies] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCompanies = async () => {
      try {
        const response = await fetch('/api/company');
        const data = await response.json();

        if (data.success) {
          setCompanies(data.data);
        } else {
          setError(data.message || 'Failed to fetch data');
        }
      } catch (err) {
        setError('Network error');
      } finally {
        setLoading(false);
      }
    };

    fetchCompanies();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h1>Company List</h1>
      <ul>
        {companies.map((company) => (
          <li key={company.id}>{company.name}</li> // 假设表中有 id 和 name 字段
        ))}
      </ul>
    </div>
  );
}

---

5. 可选：使用 Serverless 模式（Vercel/AWS Lambda）

如果部署到 Vercel 或 AWS Lambda ，需要确保 MySQL 连接在每次请求时重新建立（因为 Serverless 环境是无状态的）。可以修改 pages/api/company.js：

// pages/api/company.js (Serverless 优化版)
import mysql from 'mysql2/promise';

export default async function handler(req, res) {
  let connection;
  try {
    // 每次请求创建新连接（Serverless 环境推荐）
    connection = await mysql.createConnection({
      host: process.env.DB_HOST,
      user: process.env.DB_USER,
      password: process.env.DB_PASSWORD,
      database: process.env.DB_NAME,
    });

    const [rows] = await connection.query('SELECT * FROM Company');

    res.status(200).json({
      success: true,
      data: rows,
    });
  } catch (error) {
    console.error('Database query error:', error);
    res.status(500).json({
      success: false,
      message: 'Failed to fetch company data',
    });
  } finally {
    if (connection) await connection.end(); // 关闭连接
  }
}

---

6. 完整流程总结

1. 安装 mysql2 ：

   npm install mysql2

2. 创建数据库连接池 （lib/mysql.js）：

   import mysql from 'mysql2/promise';
   const pool = mysql.createPool({ /* 配置 */ });
   export default pool;

3. 创建 API 路由 （pages/api/company.js）：

   import pool from '../../lib/mysql';
   export default async (req, res) => {
     const [rows] = await pool.query('SELECT * FROM dbo.Company');
     res.json({ data: rows });
   };

4. 前端调用 API （pages/company.js）：

   useEffect(() => {
     fetch('/api/company')
       .then(res => res.json())
       .then(data => setCompanies(data.data));
   }, []);

---

---

7. 最终代码结构

project/
├── lib/
│   └── mysql.js          # MySQL 连接池
├── pages/
│   ├── api/
│   │   └── company.js    # API 路由
│   └── company.js        # 前端页面
├── .env                  # 数据库配置（不提交到 Git）
└── package.json

这样就能在 Next.js 中使用 mysql2 查询 Company 表的数据了！ 🚀