Zenn
Open3

Forms and Mutations

あおけんあおけん

フォームを使用すると、Webアプリケーションでデータを作成したり更新できる。
Next.jsは、API Routes を使用してフォーム送信とデータ変異を処理する強力な方法を提供する。

App Routerを段階的に採用し、フォーム送信やデータ変異の処理にServer Actionsを使用することを推奨する。
Server Actionsを使用すると、手動でAPI Routeを作成しなくても、
コンポーネントから直接呼び出せる非同期のサーバー関数を定義できる。

API Routes はCORSヘッダーを指定しない。
つまり、デフォルトでは同一オリジンのみ。

API Routes はサーバー上で実行されるので、
（APIキーのような）機密性の高い値をクライアントに公開することなく、
環境変数を通して使用することができる。
これはアプリケーションのセキュリティにとって非常に重要。

あおけんあおけん

Examples

Server-only form

Pages Routerでは、サーバー上で安全にデータを変更するために、
APIエンドポイントを手動で作成する必要がある。

// pages/api/submit.ts
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 })
}

次に、イベント・ハンドラを使ってクライアントからAPI Route を呼び出す。

// pages/index.tsx
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,
    })
 
    // Handle response if necessary
    const data = await response.json()
    // ...
  }
 
  return (
    <form onSubmit={onSubmit}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  )
}