Next.jsにフォームを追加/設置/設定する方法

What is Next.js?
Next.jsとは

Next.jsは、Vueと双璧をなすReactをベースとしたフレームワークです。Nextと呼ばれることもあります。Vercelによって主に開発されており、Vercelへのデプロイ体験は非常にシームレスです。もちろん他のホスティングもNext.js対応を謳うところは多く、静的サイトにとどまらないベースとして活用することができます。

最初のリリースは2016年で比較的新しいフレームワークになります。Reactが普及するにつれ、そのスキルを同様に活かすことができるフレームワーク、静的サイトジェネレーターとしてシェアを拡大してきています。ルーティングやデータ取得、外部サービスとのインテグレーションなど、非常に多機能でカスタマイズ性も非常に高いものがあります。

Next.jsを使うようなプロジェクトではそもそもフォームも一式一緒に作ってしまうことも多いかもしれませんが、とりあえずのフォーム構築といった用途であまり時間をかけたくない場合には、外部のフォームサービスの利用も有力なオプションになります。

Next.js x SSGform
Next.jsにフォームを追加する方法

Next.jsで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。

1. SSGformアカウントを作成する

メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。

2. SSGformマイページで、フォームを作成する

好きな名前をつけてフォームを管理することができます。ここでは例えば「Next.jsサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。

3. Next.js側にフォームのhtmlを記述する

<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。(※URLはサンプルなので、このままコピペしても動きません)

<form action="https://ssgform.com/s/NeXtFoRm" method="post">
 <input type="text" name="お名前" required="required" />
 <input type="email" name="メールアドレス" required="required" />
 <textarea name="お問い合わせ内容" required="required"></textarea>
 <button type="submit">送信する</button>
</form>

4. テスト送信して、完了です

あとはNext.jsのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。

「Next.jsを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なNext.jsライフを送ってください!

 

Get started
まずはフリープランでスタート

フリープランでも機能制限は無し。10有効フォームURL、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。