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

17108 ワード

テキストリンク

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: '[email protected]',
      from: '[email protected]',
      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>
	/* 省略 */