logoNext.js 简体中文
文档博客学习
简介/指南/表单

如何使用 API 路由创建表单

表单使您能够在 Web 应用程序中创建和更新数据。Next.js 提供了一种强大的方式，使用 API 路由 (API Routes) 来处理数据变更。本指南将带您了解如何在服务器端处理表单提交。

服务端表单

要处理服务端的表单提交，需要创建一个 API 端点来安全地变更数据。

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const data = req.body
  const id = await createItem(data)
  res.status(200).json({ id })
}
export default function handler(req, res) {
  const data = req.body
  // 调用数据库等操作
  // const id = await createItem(data)
  // ...
  res.status(200).json({ data })
}

然后，通过事件处理程序从客户端调用该 API 路由：

import { FormEvent } from 'react'

export default function Page() {
  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()

    const formData = new FormData(event.currentTarget)
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    })

    // 如有必要，处理响应
    const data = await response.json()
    // ...
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">提交</button>
    </form>
  )
}
export default function Page() {
  async function onSubmit(event) {
    event.preventDefault()

    const formData = new FormData(event.target)
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData,
    })

    // 如有必要，处理响应
    const data = await response.json()
    // ...
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">提交</button>
    </form>
  )
}

须知：

  • API 路由 默认不指定 CORS 头信息，这意味着它们默认仅允许同源请求。
  • 由于 API 路由在服务器端运行，我们可以通过 环境变量 使用敏感值（如 API 密钥）而不会暴露给客户端。这对应用程序的安全性至关重要。

表单验证

我们建议使用 HTML 验证如 required 和 type="email" 进行基本的客户端表单验证。

对于更高级的服务端验证，您可以使用模式验证库如 zod 在变更数据前验证表单字段：

import type { NextApiRequest, NextApiResponse } from 'next'
import { z } from 'zod'

const schema = z.object({
  // ...
})

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const parsed = schema.parse(req.body)
  // ...
}
import { z } from 'zod'

const schema = z.object({
  // ...
})

export default async function handler(req, res) {
  const parsed = schema.parse(req.body)
  // ...
}

错误处理

您可以使用 React 状态在表单提交失败时显示错误消息：

import React, { useState, FormEvent } from 'react'

export default function Page() {
  const [isLoading, setIsLoading] = useState<boolean>(false)
  const [error, setError] = useState<string | null>(null)

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsLoading(true)
    setError(null) // 新请求开始时清除之前的错误

    try {
      const formData = new FormData(event.currentTarget)
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      })

      if (!response.ok) {
        throw new Error('提交数据失败，请重试。')
      }

      // 如有必要，处理响应
      const data = await response.json()
      // ...
    } catch (error) {
      // 捕获错误信息展示给用户
      setError(error.message)
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <form onSubmit={onSubmit}>
        <input type="text" name="name" />
        <button type="submit" disabled={isLoading}>
          {isLoading ? '加载中...' : '提交'}
        </button>
      </form>
    </div>
  )
}
import React, { useState } from 'react'

export default function Page() {
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState(null)

  async function onSubmit(event) {
    event.preventDefault()
    setIsLoading(true)
    setError(null) // 新请求开始时清除之前的错误

    try {
      const formData = new FormData(event.currentTarget)
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      })

      if (!response.ok) {
        throw new Error('提交数据失败，请重试。')
      }

      // 如有必要，处理响应
      const data = await response.json()
      // ...
    } catch (error) {
      // 捕获错误信息展示给用户
      setError(error.message)
      console.error(error)
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      {error && <div style={{ color: 'red' }}>{error}</div>}
      <form onSubmit={onSubmit}>
        <input type="text" name="name" />
        <button type="submit" disabled={isLoading}>
          {isLoading ? '加载中...' : '提交'}
        </button>
      </form>
    </div>
  )
}

显示加载状态

您可以使用 React 状态在服务器提交表单时显示加载状态：

import React, { useState, FormEvent } from 'react'

export default function Page() {
  const [isLoading, setIsLoading] = useState<boolean>(false)

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    setIsLoading(true) // 请求开始时设置加载状态为 true

    try {
      const formData = new FormData(event.currentTarget)
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      })

      // 如有必要，处理响应
      const data = await response.json()
      // ...
    } catch (error) {
      // 如有必要，处理错误
      console.error(error)
    } finally {
      setIsLoading(false) // 请求完成时设置加载状态为 false
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '加载中...' : '提交'}
      </button>
    </form>
  )
}
import React, { useState } from 'react'

export default function Page() {
  const [isLoading, setIsLoading] = useState(false)

  async function onSubmit(event) {
    event.preventDefault()
    setIsLoading(true) // 请求开始时设置加载状态为 true

    try {
      const formData = new FormData(event.currentTarget)
      const response = await fetch('/api/submit', {
        method: 'POST',
        body: formData,
      })

      // 如有必要，处理响应
      const data = await response.json()
      // ...
    } catch (error) {
      // 如有必要，处理错误
      console.error(error)
    } finally {
      setIsLoading(false) // 请求完成时设置加载状态为 false
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit" disabled={isLoading}>
        {isLoading ? '加载中...' : '提交'}
      </button>
    </form>
  )
}

重定向

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

import type { NextApiRequest, NextApiResponse } from 'next'

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

环境变量

学习在 Next.js 应用中添加和访问环境变量。

ISR

了解如何在运行时使用增量静态再生 (ISR) 创建或更新静态页面。