一、安装全局依赖
npm i -g create-next-app
二、创建next项目
create-next-app react-next-demo
//或
create-next-app react-next-demo --typescript
三、加载mysql依赖
npm i -S mysql2
四、运行项目
npm run dev
五、创建db文件目录,目录下创建index.ts
import { createConnection } from "mysql2";
// 创建数据库连接
const db = createConnection({
host: 'localhost', // 数据库主机名
user: 'root', // 数据库用户名
password: 'password', // 数据库密码
database: 'mydb' // 数据库名称
});
// 连接到数据库
db.connect((err) => {
if (err) {
console.error('无法连接到数据库:', err);
return;
}
console.log('已成功连接到数据库');
});
module.exports = db;
六、创建pages文件目录,目录下创建api文件目录,api目录下创建user.ts
请求地址 http://localhost:3000/api/user
import db from "@/db";
import { NextApiRequest, NextApiResponse } from "next";
export default (req: NextApiRequest, res: NextApiResponse) => {
db.query(`SELECT * FROM ....`, (err, result) => {
res.status(200).json(result)
})
};
七、在pages目录下创建user.tsx
页面访问地址 http://localhost:3000/user文章来源:https://www.toymoban.com/news/detail-731060.html
import { useEffect } from "react"
export default () => {
useEffect(() => {
fetch(`api/user`).then(res => {
console.log(res) //接口数据
})
}, [])
return <div>Hello Next.js</div>
}
Tip 目录结构
文章来源地址https://www.toymoban.com/news/detail-731060.html
到了这里,关于React+Node——next.js 构建前后端项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!