📧

SendGirdでメールを飛ばす!

2022/11/26に公開

Next.js

SendGrid

tech

SendGridを使ってみる

SendGridとは公式によると

SendGridはクラウドベースのメール配信サービスです。
アカウントを取得するだけですぐに利用を開始でき、
簡単・確実にメールをお届けします。
面倒なメンテナンス作業や無駄なコストを削減し、
ビジネスを加速させましょう！

https://sendgrid.kke.co.jp/

アカウントを作成して、翌日から使うことができるようになります。
公式チュートリアルがあったのですが、bootstrapだけインストールができなかった!
UIはカッコ悪くなりましたが、自分のメールアドレスにメールを送信することができました。

こちらが一応公式のチュートリアル

API Keyを作っておく

API Keyの作り方が紹介された画像がなかったので、メモ用にスクリーンショットをとっておきました。
画面右上から、ダッシュボードへ移動してこちらからAPI Keyを作成するページへ行けます。

こちらの左側の画面の下の方に設定画面があります

こちらですね

右上のボタンから、API Keyを作成できます

名前はなんでもよくて、入力が終わると、長い文字が作成される!
これがAPI Keyで２度とみれなくなるらしいので、コピーして大事に保存しておく!

みられたら危ないので隠してます😇

今回は、Verselにhostingするところまではやっていません。
それでは、やっていきましょう!

Next.jsのプロジェクトを作成する。今回は、sendgrid-appにする

npx create-next-app
Need to install the following packages:
  create-next-app@13.0.5
Ok to proceed? (y) y
✔ What is your project named? … sendgrid-app
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
Creating a new Next.js app in /Users/UTI-Project/JSProject/NextProject/sendgrid-app.

Using npm.

インストールが完了したら、メールの機能を実装を行なっていきます。
SendGrid専用のnpmのpackageがあるので、こちらをインストールしておきます。

npm install --save @sendgrid/mail

Visual Sutadio Codeを開いて、ファイルを追加していく。
Next.jsは、フロントエンドなんだけど、APIを作ることができるので、Next.jsだけで完結できる!
pages/apiディレクトリ内にsend.jsを作成する。
こちらに、SendGridのDashBordで作成したAPI Keyを貼り付ける。

pages/api/send.js

export default function handler(req, res) {  
    if(req.method === 'POST') {
      const sgMail = require('@sendgrid/mail');
      sgMail.setApiKey("******************************:"); //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を作成する
こちらには、フォーム画面を作るHTMLとボタンを押した時の処理を書いてます。
Next.js用のbootstrapがなぜか、インストールできなくて、できたものもあるけど、なぜか設定しようとするとエラーが出る?
モダンな技術とは、相性が悪いのかもしれないですね😅

pages/form.js

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>
    )
  }

http://localhost:3000/form にアクセスして入力フォームが表示されればOK!
試しに自分のGamilに送信してみた!

成功したみたいですね。

最後に

以前はEmail.jsなるものを使ってみたのですが、SendGridの方が情報も多く、外部サービスは無料枠もあるので、使いやすい。
Next.jsやFlutterなどのモダンな技術と相性が良いので、人気があって最近は使う人たちが増えているみたいですね。

SendGridを使ってみる

SendGridとは公式によると

API Keyを作っておく

フォームを作成する

最後に

Discussion