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を使うようなプロジェクトではそもそもフォームも一式一緒に作ってしまうことも多いかもしれませんが、とりあえずのフォーム構築といった用途であまり時間をかけたくない場合には、外部のフォームサービスの利用も有力なオプションになります。
Next.jsで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Next.jsサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
あとはNext.jsのローカル開発環境から、またはデプロイした先でテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Next.jsを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なNext.jsライフを送ってください！
