为什么我们在 MongoDB 的 Next.js 应用程序中有 api 文件夹？答案

【问题标题】：Why we have api folder in Next.js app with MongoDB?为什么我们在 MongoDB 的 Next.js 应用程序中有 api 文件夹？
【发布时间】：2021-04-08 11:42:52
【问题描述】：

我正在使用 MongoDB 进行 Next.js 电子商务项目。我以来自 GitHub (https://github.com/vercel/next.js/tree/canary/examples/with-mongodb-mongoose) 的“with-mongodb-mongoose”作为基础示例项目。一切正常，但我不明白为什么我们有带有 GET、PUT 等路由的 api 文件夹？如果我要删除这个文件夹，所有的工作都会因为在组件中我们使用 mongodb 方法，如 find、findById 等，并且不使用来自 api 的路由。

感谢您的解释和新年快乐！

【问题讨论】：

标签： reactjs mongodb rest mongoose next.js

【解决方案1】：

您可以看到 api 路由的名称是 [id]，因此它是动态的。这意味着您可以获取例如“/pets/123”，并且路由将从请求 url 参数中提取该 id '123'，如下所示：

const {
query: { id },
method,
} = req

然后获取特定的动物：const pet = await Pet.findById(id)

这使您可以通过仅从 url 中获取具有 id 的宠物来获取特定的宠物，而不是像 index.js 文件那样一般的所有宠物。

如果您不需要通过 id 获取特定宠物，您可以删除该文件，但我想它在那里向您展示了 nextjs 动态 api 路由的工作原理。

正如您所说，表单组件使用动态路由通过 id 获取动物，因此如果您删除该文件夹，您将失去该功能。

【讨论】：

感谢您的宝贵时间！是的，我明白你的意思，但是对于单个宠物，我可以在页面中创建文件夹“宠物”，并在“宠物”中创建 [id].js 文件。在 [id].js getServerSideProps 内部，我将执行以下操作：const pet = await Pet.findById(params.id).lean() 因此，还不需要 api 文件夹。
getServerSideProps 用于获取最初应该由服务器显示和渲染的初始数据。因此，您可以在每页使用一次 getServerSideProps 获取单个宠物，但如果您希望用户请求更多单个宠物而无需重新加载和重新呈现页面，则需要一个 API 路由，因为一旦网站被呈现并发送到客户端，用户将无法再访问前端的数据库连接，因为 getServerSideProps 仅在服务器端运行一次，而不是客户端。