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

Question

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

Answer 1

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

Answer 2

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

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

接口路由

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 请求。您可能已经知道如何执行此操作，但为了完整起见，请提及此内容。

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

fetch顺便说一句，您无需担心与 Next.js 的跨浏览器兼容性。Next.js在需要时自动添加一个polyfill 。