乐闻世界logo
搜索文章和话题

NextJS 如何处理 post 请求?

5 个月前提问
21 天前修改
浏览次数197

4个答案

1
2
3
4

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 请求。然而,你仍然可以通过检查传入的 contextreq 对象来查看是否有 POST 请求,并据此执行逻辑,但这并不是它们的主要用途。

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

2024年6月29日 12:07 回复

要让 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

2024年6月29日 12:07 回复

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

2024年6月29日 12:07 回复

在 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

2024年6月29日 12:07 回复

你的答案