Next.jsにフォームを追加/設置/設定する方法
What is Next.js?
Next.jsとは
Next.jsは、Vueと双璧をなすReactをベースとしたフレームワークです。Nextと呼ばれることもあります。Vercelによって主に開発されており、当然のことながらVercelへのデプロイ体験は非常にシームレスです。もちろん他のホスティングもNext.js対応を謳うところは多く、静的サイトにとどまらないベースとして活用することができます。
サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）の両方をサポートしており、検索エンジン最適化（SEO）の向上や、パフォーマンスの向上などが期待できることも特徴と言えるでしょう。また、Next.jsはReactのエコシステムに統合されており、Reactの機能を活用できます。例えば、React Hooksや、JSXなどを使用することができます。加えて、Next.jsは、独自のAPIルートを提供しており、APIエンドポイントを簡単に作成できるようになっています。フルスタックのアプリケーションや、サーバーレスの関数を作成するために使用することもできます。
最初のリリースは2016年で比較的新しいフレームワークになります。zeit.co（現在のVercel）のCEOであるGuillermo Rauchによって発表されました。当初はReactアプリケーションのサーバーサイドレンダリングを簡単にするためのフレームワークとして開発されましたが、その後静的サイトジェネレーターとしての機能も強化され、バージョンアップを重ねる度に機能強化されてきました。
Reactが普及するにつれ、そのスキルを同様に活かすことができるフレームワーク、静的サイトジェネレーターとしてシェアを拡大してきています。ルーティングやデータ取得、外部サービスとのインテグレーションなど、非常に多機能でカスタマイズ性も非常に高いものがあります。開発も非常に活発で、バージョンもどんどんと上がっていっています。その度に意欲的な機能追加が行われており、その勢いはまだまだ続きそうです。
Next.js公式サイトは以下をご参照ください。
» Next.js公式サイト
Next.jsの主なリリース
- 15.5
非同期処理やキャッシュ処理に互換性のない変更が行われた他、React19のサポートやパフォーマンス向上のための改善等、多数の修正が行われました。 - 15.4
パフォーマンスや安定性の向上、Turbopackとの互換性向上が行われました。 - 15.3
alpha版としてTurbopack for buildsが同梱された他、client instrumentationやnavigationに新しいフックが追加されるなどの改善が行われました。 - 15.2
デバッグを容易にするための改善やTurbopackのパフォーマンス改善などが行われました。 - 15.1
React19へのアップグレードや新しいAPIの追加、開発者体験を向上させる改善などが行われました。 - 15.0
fetch時にキャッシュされない動作がデフォルトになったり、GETルートハンドラーもデフォルトでキャッシュをしなくなったりするなど、キャッシュ動作周りの調整が多く入った他、破壊的変更を含む多くの変更や改善、実験的機能の導入などが行われました。 - 14.2
Turbopackのリリース候補版投入や、ビルド時のメモリ使用量の削減、CSS最適化、キャッシュの改善などの他、様々な改善や修正が行われました。 - 14.1
Turbopackの改善やSelf-Hostingのドキュメント強化、エラーメッセージの改善などのDX改善が行われました。 - 14.0
パフォーマンスを大きく向上させるTurbopackのStableリリース、ServerActionsのStableリリース、Partial Prerenderingのプレビューリリース、metadataの改善などが行われました。 - 13.5
App Router、Page Routerの改善がさらに進み、22%の速度改善が行われた他、メモリ使用量の削減、unstable_getImgProps()の実験的導入、その他多数の改善が行われました。 - 13.4
App Routerの改善、Turbopack（Beta）追加、ServerActions（Alpha）追加等の行われました。 - 13.3
MetadataAPIの機能強化、Routesの並行化や介入等の機能強化が行われました。 - 13.2
ビルトインされたSEO対策機能や、Errorのオーバレイ表示、Next.js Cache（Beta）等の機能追加、改善が行われました。 - 13.1
Edge Runtimeの導入やTurbopackのアップデート等の改善が行われました。 - 13.0
next/imageが安定版として公開された他、next/link等の改善が行われました。
Next.js x SSGform
Next.jsにフォームを追加する方法
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
まずはフリープランでスタート
フリープランでも機能制限は無し。フォームURL数無制限、月間100フォーム送信まで無料でお使いいただけます。クレジットカードの登録も不要。今すぐ気軽にはじめられます。
