Next.js 中分为 服务端组件 和 客户端组件，内置的获取数据各不相同
服务端组件
方式1 – 使用 fetch
export default async function Page() {
const data = await fetch('https://api.vercel.app/blog')
const posts = await data.json()
return (
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
方式2 – 使用 ORM 或 数据库
以 MongoDB 为例，使用 mongoose 连接
1. 安装 mongoose
pnpm i mongoose
2. 创建数据库连接文件 src\app\lib\db.js
const mongoose = require("mongoose");
async function connectDB() {
try {
// 连接到本地 MongoDB 数据库 -- mongodb://数据库的用户名:密码@数据库的主机名:端口号/数据库的名称
await mongoose.connect("mongodb://test:password@localhost:27018/test");
console.log("MongoDB 连接成功");
} catch (error) {
console.error("MongoDB 连接报错", error);
// 退出进程
process.exit(1);
}
}
module.exports = connectDB;
3. 创建数据表映射文件 src\app\lib\models\Blog.js
const mongoose = require("mongoose");
const blogSchema = new mongoose.Schema({
title: String,
content: String,
});
// 需要有第三个参数，否则对应的数据表名称会是blogs
const Blog = mongoose.model("blog", blogSchema, "blog");
module.exports = Blog;
4. 页面中导入使用
src\app\test\page.tsx
import connectDB from "../lib/db";
import Blog from "../lib/models/Blog";
export default async function HomePage() {
try {
// 连接数据库
let res = await connectDB();
// 查询博客数据
const blogList = await Blog.find();
return (
<div>
<h1>博客列表</h1>
<ul>
{blogList.map((blog) => (
<li key={blog._id.toString()}>{blog.title}</li>
))}
</ul>
</div>
);
} catch (error) {
console.error("获取数据出错:", error);
return <div>获取数据失败</div>;
}
}
5. Docker destop 安装 MongoDB
见 https://blog.csdn.net/weixin_41192489/article/details/145176073
6. 使用 MongoDB Compass 连接 MongoDB
下载安装 MongoDB Compass
https://www.mongodb.com/zh-cn/docs/compass/current/
新建连接
7. 创建数据库 test , 数据表 blog
8. 创建一条测试数据
{
"_id": {
"$oid": "67aefdd5de9bca5aae5aa6f8"
},
"title": "第1篇博客的标题",
"content": "第1篇博客的内容"
}
9. 为数据库 test 创建用户名、密码和角色
db.createUser( { user: "test", pwd: "password", roles: [ { role: "dbOwner", db: "test" } ] } )
- user：指定要创建的用户名。
- pwd：指定该用户的密码。
- roles：指定用户的角色，角色决定了用户对数据库的操作权限。可以指定多个角色，每个角色是一个包含 role 和 db 的对象。role 是角色名称，db 是角色生效的数据库。
常见的角色及其说明：
- read：允许用户读取指定数据库中的数据。
- readWrite：允许用户读写指定数据库中的数据。
- dbAdmin：允许用户管理指定数据库，如创建索引、查看统计信息等。
- userAdmin：允许用户管理指定数据库中的用户和角色。
- dbOwner：拥有指定数据库的所有权限，包括读写、管理用户和角色等。
- root：拥有所有数据库的最高权限。
10. 启动项目，测试效果
浏览器访问 http://localhost:3000/test，效果如下：
客户端组件
见官网 https://nextjs.org/docs/app/getting-started/fetching-data#client-components
