はじめに

JavaScript界隈ではすっかり地位を確立したJAMSTACK。

僕も大好きです。

最近の休日は、ほぼ全てJAMSTACK開発に費やしています。
静的ホスティングサービスはコストパフォーマンスに優れたものも多く、ブログや簡単なショッピングサイトなどをJAMSTACKでサクッと作ってしまうことで得られるメリットも多いと思います。

ブログやショッピングサイトにはメールが必須ですよね。

とはいえ、まだまだ参考文献が少ないのが現状です。。
今回は、NextプロジェクトをVercelにデプロイした際に、どのようにSendGridと連携してメールを送信するかを書きたいと思います。

前提条件

既に構築済みのNextプロジェクトに組み込むことを想定しているので、以下の環境構築は既に完了済みと想定して話を進めていきます。

SendGridのアカウント作成（APiキーの作成も完了済み）
Next.jsの基本的な構築

Vercelへのデプロイは各自に任せます。
メールの送信テストは npm run dev でも検証可能です。

SendGridモジュールのインストール

プロジェクト配下で以下のコマンドを実行して必要なモジュールをインストールします。

$ npm i @sendgrid/mail

サーバーレス関数の作成

静的ホスティングサービスってPOST出来ないんでしょ？

という意見を耳にすることがありますが、可能です。

Vercelでは任意の関数をサーバレス機能として展開することができ、バックエンドの言語のHTTPリクエストを取得し、応答を提供することができます。

サーバーレス関数を使うことで、ユーザー認証、フォーム送信、データベースクエリ、カスタムSlackコマンドなどを処理することが可能です。

まず /pages/api 配下に send.js というファイルを作成します。

send.js

const sgMail = require('@sendgrid/mail')

export default async function(req, res) {
  sgMail.setApiKey('SendGridで作成したAPIキー')

  const { email, message } = req.body

  const content = {
    to: email,
    from: '任意のメールアドレス（実現するもの）',
    subject: 'メールのタイトルです',
    text: message,
    html: `<p>${message}</p>`
  }

  try {
    await sgMail.send(content)
    res.status(200).send('Message sent successfully.')
  } catch (error) {
    console.log('ERROR', error)
    res.status(400).send('Message not sent.')
  }
}

これでメールの送信処理の作成が完了しました。

メールを送信する

あとは任意のファイルの中で作成したサーバーレス関数にPOSTするだけでメールが送信できます。
必要に応じて async/await などの非同期処理を行ってください。

index.js

import fetch from 'node-fetch';

fetch('/api/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        email: 'test@exsample.com'
        message: 'Test mail.'
      })
    })

最後に

まだまだ開発が活発に行われており、変化に柔軟に対応していかなければならないNext.jsですが、本当に面白い技術なので、皆さんも是非触ってみてください。

この記事が、不安や懸念を振り払うお手伝いになれたら幸いです。

参考文献

Create and Deploy a SendGrid-Powered Next.js and Node.js Contact Form with ZEIT Now

VercelにデプロイしたNextアプリからSendGridを使ってメールを送信する