Next.jsとVercelで作ったフォームからSendGridでメール送信する方法 | SendGridブログ

SendGridサポートエンジニアの@kikutaro_です。最近フロントエンドの技術を触るとき、ホスティング先として「Vercel」を使っています。Next.jsやNust.jsなどで作ったアプリを簡単にデプロイできて、サーバレス機能も備えている便利なサービスです。 今回のブログでは下図のような仕組みのお問合せフォームを作ります。Next.jsでフォームとメール送信機能(SendGridを利用)を実装してVercel上で動かします。 環境準備 Node.js 12以上が入った環境を用意します。記事ではDocker上のAlpine LinuxにNode.js 14.17.1を入れた環境を使いました。 最初にNext.jsのプロジェクトを作成します。 npx create-next-app プロジェクト名は自由です。ここではvercelformと名づけました。 完了したら以下のコマンドを実行