Next.jsでformをsubmitしてPOSTリクエストを送る

前回は固定の1パラメータを送付していましたが今回はユーザーの入力によって可変のパラメータを送付するケースを考えてみます。

Next.jsの公式を参考にしました
https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations

ボタン押下してsubmitした際にオブジェクトを取得してJSONの形に加工してPOSTリクエストを送るようにしています。送信後のレスポンスも取得できるので、結果を画面に表示するなど柔軟に利用できます。

form.tsx

# formのsubmitをハンドルしてリクエストを送る
async function onSubmit(event: FormEvent<HTMLFormElement>) {
  event.preventDefault()
  const formData = new FormData(event.currentTarget)
  const response = await fetch('/api/user/' + id, {
    method: 'POST',
    headers: 'Content-Type': 'application/json',
    body: JSON.stringify(Object.fromEntries(formData)),
  })
  const data = await response.json()
  console.log(data)
}
# form
<form onSubmit={onSubmit}>
  <input type="radio" name="item" value="1" />
  <input type="radio" name="item" value="2" />
  <input type="radio" name="item" value="3" />
  <button type="submit">Submit</button>
</form>