如何处理 next.js 中的发布请求？

Posted 2023-02-22

【中文标题】如何处理 next.js 中的发布请求？

【英文标题】：how to handle a post request in next.js?

【发布时间】：2021-06-18 17:29:33

【问题描述】：

我想使用 next.js 在我的 api 文件夹中设置一个 POST 路由，并且我正在将数据发送到该路由，但我无法解析数据以将其实际保存在数据库中。在 next.js 中处理 POST 路由的最佳方法是什么。特别是解析JSON格式的数据？

【参考方案1】：

要让 POST 请求在 Next.js API 路由中工作，您可能需要做 3 件事。

将方法限制为POST 使用JSON.parse()解析路由中的JSON 向后端发送请求

API 路由

Next.js 中的 API 路由默认支持所有类型的请求，包括 GET、POST、DELETE 等。因此，虽然不是必需的，但最好将路由限制为您想要支持的方法。

在您的情况下，如果您只想支持某个路由上的POST 请求，您可以使用req.method 过滤掉非发布请求。

if (req.method !== 'POST') 
  res.status(400).send( message: 'Only POST requests allowed' )
  return

要解析 JSON，你可以使用JSON.parse()。

const body = JSON.parse(req.body)

将它们放在一起，您的 API 路由应该如下所示：

// pages/route-name.js

export default function handler(req, res) 
  if (req.method !== 'POST') 
    res.status(405).send( message: 'Only POST requests allowed' )
    return
  

  const body = JSON.parse(req.body)

  // the rest of your code

发送请求

最后，您需要从前端代码向后端发送 POST 请求。您可能已经知道如何执行此操作，但为了完整起见，请提及这一点。

fetch('/api/route-name', 
  method: 'POST',
  headers: 
    'Content-Type': 'application/json',
  ,
  body: JSON.stringify(objectWithData),
)

除此之外，您无需担心 fetch 与 Next.js 的跨浏览器兼容性。 Next.js automatically adds a polyfill when needed.

【讨论】：

而不是一般的400 Bad Request 错误，返回405 Method Not Allowed 会更合适。 developer.mozilla.org/en-US/docs/Web/HTTP/Status/405

好电话，更新了答案以改用 405 状态码

是否可以在不使用 NextJS 的 API 的情况下做到这一点？我的 NextJS 应用程序托管在 vercel 上，我所有的 API 都是外部的。我想避免使用 NextJS 服务器端 API 来避免 Vercel 中函数执行的限制。我希望像/cars 这样的页面路由本身的发布请求，但POST /cars 和NextJS 使用它的s-s-r 事物来呈现使用getServerSideProps(...) 的页面，我在其中编写逻辑以从外部API 获取数据。

您无需担心 Vercel 上的 Next.js 的任何功能限制。在 Vercel 上部署时，Next.js 站点被组合成一个单一的无服务器功能（或者如果它不适合一个，则尽可能少）。所有页面和 API 路由都通过一个无服务器功能提供。根据 Vercel 的限制，向 API 路由发送 Post 请求相当于向页面发送一个请求。 vercel.com/docs/concepts/limits/…

【参考方案2】：

与所有事情一样，这取决于。在 Next.js v12 中，只要您没有在 API 路由的导出配置中显式设置 bodyParser: false，就不需要在 API 路由中使用 JSON.parse(req.body)（请参阅 https://nextjs.org/docs/api-routes/api-middlewares）。 req.body 将被自动解析为一个对象，例如如果请求的content-type 是application/json。在这种情况下，由于内容已预先解析为对象，因此尝试在 API 中运行 JSON.parse(req.body) 可能会引发错误。