How to handle a post request in next js

Next.js 是一个基于 React 的框架，专为服务端渲染和生成静态网站优化。它处理 HTTP 请求的方式主要通过两种方式：

1. API 路由: Next.js 允许你在 /pages/api 目录中创建 API 路由，这些路由可以处理 HTTP 请求，包括 POST 请求。API 路由文件是服务器端运行的，你可以在这里编写接收和处理 POST 请求的逻辑。

   例如，如果你想创建一个处理用户注册的 POST 请求，你可以在 /pages/api 目录下创建一个名为 register.js 的文件：

   javascript
   // pages/api/register.js
   
   export default function handler(req, res) {
     if (req.method === 'POST') {
       // 获取请求体中的数据
       const { username, password } = req.body;
   
       // 这里可以添加注册逻辑，例如验证、保存到数据库等
       // ...
   
       // 返回一个成功的响应
       res.status(200).json({ message: 'User registered successfully!' });
     } else {
       // 如果不是 POST 请求，返回 405 Method Not Allowed
       res.setHeader('Allow', 'POST');
       res.status(405).end(`Method ${req.method} Not Allowed`);
     }
   }

   当客户端发送 POST 请求到 /api/register 时，Next.js 会自动调用这个处理函数。

2. getServerSideProps 或 getInitialProps: 这些函数可以在页面加载之前在服务器上运行代码，但它们通常用于服务端渲染页面的数据获取，而不是直接处理 POST 请求。然而，你仍然可以通过检查传入的 context 或 req 对象来查看是否有 POST 请求，并据此执行逻辑，但这并不是它们的主要用途。

处理 POST 请求的推荐方法是使用 API 路由。这样可以将业务逻辑分离到专门的 API 端点，使得前端和后端逻辑更加清晰，并可使你的前端页面保持简洁，因为它们不需要处理 HTTP 请求的具体细节。

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

• 将方法限制为POST
• 用于JSON.parse()解析路由中的 JSON（NextJS v12+ 中不需要）
• 向后端发送请求

https://nextjs.org/docs/api-routes/api-middlewares

API路线

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

就您而言，如果您只想支持POST特定路由上的请求，则可以使用req.method过滤掉非发布请求。

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

要解析 JSON，您可以使用JSON.parse(). 如果您使用 NextJS v12+，只要您没有设置bodyParser: false.

shell
const body = JSON.parse(req.body)

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

shell
// pages/route-name.js

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


  // not needed in NextJS v12+
  const body = JSON.parse(req.body)

  // the rest of your code
}

发送请求

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

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

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

与所有事情一样，这取决于情况。在 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 中运行可能会引发错误。

在 Nextjs 13.4 中，您可以使用路由处理程序

shell
import { NextResponse } from 'next/server'
 
export async function POST() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
    body: JSON.stringify({ time: new Date().toISOString() }),
  })
 
  const data = await res.json()
 
  return NextResponse.json(data)
}

有关路由处理程序的最新和现成模板以及更多内容，请使用 Next.js 13+ Power Snippets | TypeScript/Javascript