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