前回のブログでは、Twilio SendGridの新機能「Email Address Validation API」の基本的な使い方について紹介しました。今回はその応用例として、入力されたメールアドレスを検証し、タイプミスがあった場合にフィードバックを返すお問い合わせフォームをNext.jsで構築します。 システムの概要図は以下のとおりです。基本的な構成は以前のブログ記事「Next.js App RouterとServer Actionsを使ってメールを送るフォームを作成する」と同じで、フォームのバリデーションとメールアドレスの検証機能が追加されます。初期セットアップや環境構築、デプロイ等の説明は上記の記事を参考にしてください。 完成したアプリケーションは以下のようになります。 「gmalil.cpm」という誤ったドメインを入力してフォーム送信をすると、「gmail.com」の間違いではな
![メールアドレスのタイプミスをフィードバックするフォームをNext.jsで作る | SendGridブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/b80d1b3768b65d1d67b27c634d1f5cd0bef49614/height=288;version=1;width=512/https%3A%2F%2Fsendgrid.kke.co.jp%2Fblog%2Fwp%2Fwp-content%2Fuploads%2F2024%2F05%2F20240523-_blog.png)