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

张开发
2026/4/4 1:41:06 15 分钟阅读
在 **Next.js** 中使用 `mysql2` 连接 MySQL 数据库并查询 `xxx` 表的数据
在Next.js中使用mysql2连接 MySQL 数据库并查询Company表的数据可以按照以下步骤实现1. 安装mysql2首先安装mysql2依赖npminstallmysql2# 或yarnaddmysql22. 创建数据库连接池在lib/mysql.js或utils/db.js中创建 MySQL 连接池推荐使用连接池提高性能// lib/mysql.jsimportmysqlfrommysql2/promise;// 使用 Promise 版本constpoolmysql.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,// 无限制排队});exportdefaultpool;SQL是一种用于管理和操作 关系型数据库 的语言而MySQL则是基于SQL的一种具体的数据库管理 系统myaqlSQL说明使用mysql2/promise支持async/await。推荐使用.env文件存储敏感信息如DB_HOST、DB_USER。3. 创建 API 路由查询数据在pages/api/company.js中创建 API 路由查询dbo.Company表的数据App Router 和 Pages Router 不同写法注意:有的报错405App Routerapp/ 目录的 API 路由必须用命名导出export async functionGET() exportdefaulthandler 是旧的 Pages Router写法在 app/ 目录下完全不工作所以返回405// pages/api/company.jsimportpoolfrom../../lib/mysql;exportdefaultasyncfunctionhandler(req,res){try{//查 SHOW TABLES 来确认真实表名临时改一下 --获取该数据库下是表名//const [rows] await pool.query(SHOW TABLES);// 查询 Company 表的所有数据const[rows]awaitpool.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 asyncfunctionGET(){try{const[rows]await pool.query(SHOW TABLES);// const [rows] await pool.query(SELECT * FROM equipment_info);console.log({rows});returnResponse.json({data:rows})}catch(error){returnResponse.json({message:error.message},{status:500})}}多查询–用查询参数区分推荐更灵活export asyncfunctionGET(request){const{searchParams}newURL(request.url)const typesearchParams.get(type)// ?typeuser 或 ?typeequipmenttry{let rowsif(typeuser){[rows]await pool.query(SELECT * FROM user LIMIT 20)}elseif(typeequipment){[rows]await pool.query(SELECT * FROM info LIMIT 20)}else{returnResponse.json({message:type 参数缺失},{status:400})}returnResponse.json({data:rows})}catch(error){returnResponse.json({message:error.message},{status:500})}}调用时/api/testapi?typeuser/api/testapi?typeequipment不同 HTTP 方法查不同数据export asyncfunctionGET(){/* 查 user */}export asyncfunctionPOST(){/* 查 equipment */}说明pool.query()返回[rows, fields]rows是查询结果。使用try/catch捕获数据库错误。4. 在前端调用 API 获取数据在 Next.js 页面如pages/company.js中调用 API 获取数据创建路由文件// pages/company.js或// pages/company/route.jsNext.js API 路由文件命名对比详情链接// pages/company.jsimport{useState,useEffect}fromreact;exportdefaultfunctionCompanyPage(){const[companies,setCompanies]useState([]);const[loading,setLoading]useState(true);const[error,setError]useState(null);useEffect((){constfetchCompaniesasync(){try{constresponseawaitfetch(/api/company);constdataawaitresponse.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)returndivLoading.../div;if(error)returndivError:{error}/div;return(divh1Company List/h1ul{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 优化版)importmysqlfrommysql2/promise;exportdefaultasyncfunctionhandler(req,res){letconnection;try{// 每次请求创建新连接Serverless 环境推荐connectionawaitmysql.createConnection({host:process.env.DB_HOST,user:process.env.DB_USER,password:process.env.DB_PASSWORD,database:process.env.DB_NAME,});const[rows]awaitconnection.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)awaitconnection.end();// 关闭连接}}6. 完整流程总结安装mysql2npminstallmysql2创建数据库连接池lib/mysql.jsimportmysqlfrommysql2/promise;constpoolmysql.createPool({/* 配置 */});exportdefaultpool;创建 API 路由pages/api/company.jsimportpoolfrom../../lib/mysql;exportdefaultasync(req,res){const[rows]awaitpool.query(SELECT * FROM dbo.Company);res.json({data:rows});};前端调用 APIpages/company.jsuseEffect((){fetch(/api/company).then(resres.json()).then(datasetCompanies(data.data));},[]);7. 最终代码结构project/ ├── lib/ │ └── mysql.js # MySQL 连接池 ├── pages/ │ ├── api/ │ │ └── company.js # API 路由 │ └── company.js # 前端页面 ├── .env # 数据库配置不提交到 Git └── package.json这样就能在Next.js中使用mysql2查询Company表的数据了

更多文章