Next.js【详解】获取数据（访问接口）

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