Skip to main content

表单与数据变更

表单使你能够在 Web 应用中创建和更新数据。Next.js 提供了使用 API 路由处理表单提交和数据变更的强大方式。

提示：

  • 我们很快将建议逐步采用 App 路由并使用服务端操作来处理表单提交和数据变更。服务端操作允许你定义可以直接从组件调用的异步服务器函数，无需手动创建 API 路由。
  • API 路由不指定 CORS 头，这意味着它们默认仅限同源。
  • 由于 API 路由在服务器上运行，我们能够通过环境变量使用敏感值（如 API 密钥），而不会将它们暴露给客户端。这对应用程序的安全至关重要。

示例​

重定向​

如果你想在数据变更后将用户重定向到不同的路由，可以 redirect 到任何绝对或相对 URL：

pages/api/submit.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const id = await addPost()
  res.redirect(307, `/post/${id}`)
}

设置 cookies​

你可以使用响应上的 setHeader 方法在 API 路由内设置 cookies：

pages/api/cookie.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
  res.status(200).send('Cookie 已设置。')
}

读取 cookies​

你可以使用 cookies 请求辅助函数在 API 路由内读取 cookies：

pages/api/cookie.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const auth = req.cookies.authorization
  // ...
}

删除 cookies​

你可以使用响应上的 setHeader 方法在 API 路由内删除 cookies：

pages/api/cookie.ts
import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  res.setHeader('Set-Cookie', 'username=; Path=/; HttpOnly; Max-Age=0')
  res.status(200).send('Cookie 已删除。')
}
Last updated on