✍️

Next.jsのApp RouterでFormの入力値を取得する

2023/08/02に公開

Next.js

form

tech

フロント初心者の私にはNext.jsのApp RouterでFormをどう扱うのか、Server Actionsのページを読んでもよくわかりませんでした（With Server Componentsのケース）。

調べてもあまり良い情報がなくて困っていたのですが、このYouTube動画でわかりやすく解説されていました。

こんな感じで簡単にフォームの入力値が取れました。

import {
    Button,
    TextField,
 } from '@mui/material';

export default function Page() {
  async function subscribe(formData) {
    'use server'
    console.log(formData.get('email'))
  }

  return (
   ...略...
   <form action={subscribe}>
     <TextField name="email" label="email" variant="standard" />
     <Button type="submit" variant="outlined">購読する</Button>
   </form>
  )
}

Discussion