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

SendGridサポートエンジニアの@kikutaro_です。最近フロントエンドの技術を触るとき、ホスティング先として「Vercel」を使っています。Next.jsやNust.jsなどで作ったアプリを簡単にデプロイできて、サーバレス機能も備えている便利なサービスです。

今回のブログでは下図のような仕組みのお問合せフォームを作ります。Next.jsでフォームとメール送信機能(SendGridを利用)を実装してVercel上で動かします。

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

環境準備

Node.js 12以上が入った環境を用意します。記事ではDocker上のAlpine LinuxにNode.js 14.17.1を入れた環境を使いました。

最初にNext.jsのプロジェクトを作成します。

npx create-next-app

プロジェクト名は自由です。ここではvercelformと名づけました。

プロジェクト名を「vercelform」に設定

完了したら以下のコマンドを実行してWebアプリケーションを起動します。

yarn dev

http://localhost:3000/ にアクセスして以下の画面が表示されたら環境の準備は完了です。

メール送信機能の実装

Webフォームを作る前にメール送信機能を実装していきます。まずは以下のコマンドでSendGridライブラリを環境に追加します。

npm install --save @sendgrid/mail

メール送信機能はWeb APIとして実装します。作成したプロジェクトのpages/apiの配下にsend.jsを作成してください。

作成したプロジェクトのpages/apiの配下にsend.jsを作成

send.jsに以下の内容を反映します。4行目の「SG.xxx」はSendGridで発行したAPIキーに置き換えてください。6～12行目でフォームに登録された宛先(req.body.email)とメッセージ(req.body.message)を送信リクエストに設定して、16行目でメールを送信しています。

export default function handler(req, res) {  
    if(req.method === 'POST') {
      const sgMail = require('@sendgrid/mail');
      sgMail.setApiKey("SG.xxx"); //SendGridのAPIキー
      
      const msg = {
        to: req.body.email,
        from: 'support@example.com',
        subject: 'お問合せありがとうございました。',
        text: 'お問合せを受け付けました。回答をお待ちください。' + req.body.message,
        html: 'お問合せを受け付けました。回答をお待ちください。' + req.body.message,
      };
  
      (async () => {
        try {
          await sgMail.send(msg);
        } catch (error) {
          console.error(error);
          if (error.response) {
            console.error(error.response.body)
          }
        }
      })();
    }
  
    res.status(200)
  }

フォームの作成

続いてフォームを作成しましょう。プロジェクトの中にあるpages配下にform.jsを追加します。

pages配下にform.jsを追加

form.jsには次の2つを実装します。

フォームのHTML
ボタンを押したときの処理

2では先ほど作成したAPIを呼び出します。

export default function Form() {
  const registerUser = async event => {
    event.preventDefault()

    const res = await fetch('/api/send', {
      body: JSON.stringify({
        email: event.target.email.value,
        message: event.target.message.value
      }),
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST'
    })

    const result = await res.json()
  }

  return (
    <div className="container mt-5">
      <form onSubmit={registerUser}>
        <div className="mb-3">
          <label htmlFor="email">メールアドレス</label>
          <input id="email" name="email" type="email" className="form-control" placeholder="name@example.com"/>
        </div>
        <div className="mb-3">
          <label htmlFor="message" className="form-label">問合せ内容</label>
          <textarea id="message" name="message" className="form-control" rows="3"></textarea>
        </div>
        <div className="mb-3">
          <button type="submit" className="btn btn-primary">送信</button>
        </div>
      </form>
    </div>
  )
}

今回、フォームのデザインにBootstrapを使います。以下のコマンドで環境に追加します。

npm install bootstrap@next

pages配下にある_app.jsでBootstrapをimportします。

import 'bootstrap/dist/css/bootstrap.min.css';
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

http://localhost:3000/form にアクセスして以下のようなフォームが表示されたら実装は完了です。