Zenn
🕊️

【Next.js × SendGrid】お問い合わせフォームからメール送信のやり方

2022/04/20に公開
Next.js
API
SendGrid
tech

Next.js で作ったサイトにお問い合わせフォームを付けたいというケースは多いのではないでしょうか？

できるだけ手間をかけずに実装するにはメールサーバーは SendGrid を利用するのが簡単です。今回はそのやり方についてまとめました。

流れとしてはアプリ側で SendGrid の API にリクエストを送ってメール送信する方法です。

前提

  • SendGrid のアカウントも持っている。
  • Next.js のアプリ側でフォームは作成済み。

準備

SendGrid ライブラリがあるのでインストール。

yarn add @sendgrid/mail

API 側を作成

Next.js では pages/api を作成すればサーバー側で動作する API をサクッと作ることができる。pages/api/send.js を作成。

export default function handler(req, res) {
  let response = null;

  if (req.method === 'POST') {
    const sgMail = require('@sendgrid/mail');
    sgMail.setApiKey(process.env.SENDGRID_APIKEY);
    const msg = {
      to: req.body.email,
      bcc: 'info@your-domain.com',
      from: 'info@your-domain.com',
      subject: 'お問合せありがとうございました。',
      text: `${req.body.name} 様\nお問合せを受け付けました。回答をお待ちください。\n\n【件名】${req.body.subject}\n${req.body.message}`
    };

    (async () => {
      try {
        response = await sgMail.send(msg);
      } catch (error) {
        console.error(error);
        if (error.response) {
          console.error(error.response.body)
        }
      }
    })();
  }

  res.status(200);
  res.send(response);
}

SG_API_KEY は SendGrid の API Key で管理画面から作成しアプリ側の .env に貼り付けておく。.env を更新した際はビルドし直す必要があるので注意。

msg で html を指定すると送信メールがHTML形式になりメール本文で改行が消えてしまうため text のみを指定。

フォーム側を作成

form タグでは onSubmit を使って API にリクエストする。

import Router from 'next/router';

export default class SectionForm extends React.Component {
  render() {
    const sendForm = async event => {
      event.preventDefault();

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

      if (res.ok) Router.push('/thank-you');
    }

    return (
      /* 省略 */
      <form onSubmit={sendForm}>
        <input type="text" name="name" />
        <input type="text" name="email" />
        <select name="name"></select>
        <textarea name="message"></textarea>
      </form>
      /* 省略 */

メール送信成功時は Router を使って完了画面に遷移させる。

動作確認

フォームに入力して送信。

メールが届く。

まとめ

今回は Next.js と SendGrid API でお問い合わせフォームを作る方法について書きました。

メール送信はよくある実装なので他でも流用できそうですね。参考になれば幸いです。

参考

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

Discussion