Next.jsとNetlifyでフォームを使う方法～画面遷移しない方法も解説～

更新日:2023年03月30日(作成日: 2023年03月30日)

カテゴリー:

Next.js

アプリ

NetlifyでNext.jsのフォームを使う方法を解説します。送信後に画面遷移せずコンポーネントのみを切り替える方法、画面遷移する方法のいずれも説明します。一般的なケースに加え、Styled-componentsとReact Hook Formを利用したケースについてもコード例を掲載します。

1 Netlify＋Next.jsでフォームを使う方法
2 参考

Netlify＋Next.jsでフォームを使う方法

Netlify＋Next.jsでフォームを使う方法はすでに多くの記事が出回っていますが、この記事でも解説します。一般的なケースに加え、Styled-componentsとReact Hook Formを利用したケースについてもコード例を掲載します。

Netlify側で特別な設定をしないでも、ソースコード内のformタグに以下の数個のコードを加えるだけで、Netlifyの管理画面上でフォームの内容を受け取ることが可能になります。

それではその方法を順番に解説していきます。大きく3ステップに分けることができます。

①formタグにdata-netlify属性とname属性を指定

formタグに、data-netlify=”true”とname=”任意の名前”属性を指定します。

<form data-netlify="true" name="任意の名前">

Styled-componentsを利用しているなら、次のように指定した方が確実です。

const Form = styled.form.attrs({
  name: "任意の名前",
  "data-netlify": "true"
})`
  // 何らかのスタイリング
`

②form内にtype=”hidden”のinput要素を追加

form内に以下のコードを追加します。

<input type="hidden" name="form-name" value="contact" />

React Hook Formを利用しているならば、次のようなコードの概略になります。以下の例は、name, email, messageの3つのフォーム要素を持つformの例です。フォームの内容、useFormのオプションやレンダリングするコンポーネントの内容は適宜変更してください。

type FormData = {
  name: string
  email: string
  message: string
  "form-name": string
}
const Component = () => {
  const {
    register,
    handleSubmit,
    formState: { errors, dirtyFields },
  } = useForm<FormData>({
    mode: 'onChange',
  })
  const onSubmit = () => {/*何らかの処理*/}
  //いろいろなコード
  return (
    <Form onSubmit={handleSubmit(onSubmmit)}>
      <input type="hidden" {...register("form-name") value="任意の名前"/>
      {/* その他のフォームが続く */}
    </Form>
  )
}

③ルートディレクトリにPOSTする

fetchやaxios等でルートディレクトリにPOSTします。POST後の処理は任意に書くことができるので、ページ遷移してもよし、stateの変更をするだけでもよし。上のコードのonSubmit関数の中身を実装していくことになります。

  const onSubmit = (data: FormData) => {
    fetch('/', {
      method: 'POST',
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: new URLSearchParams(data).toString(),
    })
      .then(() => {
        // 任意の処理を書く。例えばStateを変更したり、router.pushでページ遷移したり
        setIsSend(true)
        onCompleted()
      })
      .catch(() => setIsError(true))
  }