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

Question

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

Answer 1

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

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

API路线

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

在你的情况下，如果你只想支持特定路由上的 POST 请求，你可以使用 req.method 过滤掉非 post 请求。

if (req.method !== 'POST') {
  res.status(405).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.

Answer 2

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

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

how to handle a post request in next.js?

javascript

backend

reactjs

next.js

API路线

发送请求