Vercelは、特にNext.jsのデプロイ先として地位を確立しているホスティングサービスです。スムーズにデプロイできるジェネレーターはNext.jsに限定されるわけではなく、Nuxt.jsやReact、VueといったJavascript系のものはもちろん、HUGOやGatsbyといった異なる言語のものにも対応しています。
もともとはZEITと呼ばれていたサービスで、Next.js自体の開発も主導しています。React系のフレームワークとしてはデファクトスタンダードになりつつあるNext.jsの盛り上がりと共に、そのホスティング先としてのVercelの人気も高まっている印象です。先述の豊富なフレームワーク対応など、開発は非常に盛んです。
簡単に使い始めることができ、国内のエッジサーバーで提供されるため、高速にページを表示することができます。独自ドメインの設定や自動スケールなど、アプリケーションに必要な機能が充実しており、リッチになり続けるフロントエンドのホスティング先としてこれからもシェアを拡大していくことが予想されます。
Vercel公式サイトは以下をご参照ください。
» Vercel公式サイト
Vercel上にフォームを設置するのは、様々な選択肢があります。お使いのフレームワークやジェネレーターによって、かなり高機能なことまでできるので、外部のメールAPIやSMTPにアクセスしてメールを送信するといったことも可能は可能です。ただ、単純なフォームを手軽に設置したいという目的になると、外部のフォームサービスを利用してしまうのが最もお手軽でしょう。
Vercelで作られたサイトにSSGformを利用してフォームを設置するのは非常に簡単です。以下の手順に沿って進めてみてください。
メールアドレスだけで登録できます。登録後、メールアドレス確認が完了すれば準備完了です。
好きな名前をつけてフォームを管理することができます。ここでは例えば「Vercelサンプルお問い合わせフォーム」と設定することにします。フォーム作成と同時に専用のURLが発行されますので、それをコピーします。
Vercelにデプロイするページのいずれかに、<form からはじまる、formをhtmlで記述してください。どういった項目をフォームに用意するか、また、どういったclass指定やcssで装飾を施すかは自由です。シンプルなフォームの場合、以下のようなhtmlが含まれたページを作成することになると思います。（※URLはサンプルなので、このままコピペしても動きません）
あとはVercelにデプロイするジェネレーターのローカルサーバーから、またはVercelにデプロイした後に実際のURLでテスト送信をして、問題なく通知メールが届けば完了です。シンプルな設置以外にも、reCAPTCHAを追加したり、ファイル送信フィールドも追加できますので、詳しくはコード例のサンプルをご覧ください。
「Vercelを採用したいけど、フォームがなぁ」と悩まれていたのであれば、SSGformを活用して、快適なVercelライフを送ってください！
