このチュートリアルでは、5つの簡単な手順で、次のAPIルートを使用してメールを送信するサービスを作成します.js

sendgridとは

それは非常に人気のあるサービスは、そのAPIの通信を介して、お客様のアプリケーションにあるすべての顧客にメールを送信することができます.私はそれがUFO、Spotify、Airbnb、Yelpなどの大企業によって使用されることを強調したいと思います.あなたは、サービスに関する詳細な情報を得ることができますhere

次は何か。js

これは、静的なだけでなく、動的なウェブサイトを作成することができますオールインワンソリューションです.それらのJamstackに興味のある優れたオプションです.

次のアプリを作成

npx create-next-app next-sendgrid

スクリプトオブジェクトを追加

このステップでは、プロジェクトが必要とする構造に自分自身を捧げます.
依存関係をインストールした後、プロジェクトはこのように表示されます.

今すぐ追加scripts すべてのコマンドを持ちます.npm or yarn
最後にフォルダを作成しなければなりません/pages , フォルダの中にindex.js , registry.js とフォルダ/api . インサイド/ api フォルダを作成しますsend-email.js

ステップ3

プログラミングでは、我々は通常多くを使用している機能を再利用するために良い練習です/utils 次のファイルが含まれます

sendemailjs

import fetch from 'node-fetch'

const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send'

const sendEmail = async ({ name, email }) => {
    await fetch(SENDGRID_API, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${SENDGRID_API_KEY}`
        },
        body: JSON.stringify({
          personalizations: [
            {
              to: [
                {
                  email
                }
              ],
              subject: 'Demo success :)'
            }
          ],
          from: {
            email: '[email protected]',
            name: 'Test SendGrid'
          },
          content: [
            {
              type: 'text/html',
              value: `Congratulations <b>${name}</b>, you just sent an email with sendGrid`
            }
          ]
        })
    });
}

export { sendEmail };

あなたがメールを送る計画がなぜこのように設計されるかについてわかっていたいならば、あなたはより多くの情報を知っていることができますhere
/API/メールを送信します.TS
APIルートを使用してAPIを構築する簡単なソリューションを提供しますNext.js . あなたは利点が別の同様のソリューションを表現する代わりに何であるか疑問に思うかもしれません.
APIルート
エクスプレス:サーバー
Serverlessに焦点を当てている利点は、エラーレートを減らす機能に基づいてAPIを構築することです.必要に応じて呼び出されます.伝統的なサーバーのアプローチでは、あなたのAPIは、誰もそれを消費している場合でも、あなたのホスティングプロバイダの支払いコストを増加させることができます.

import { NextApiRequest, NextApiResponse  } from 'next';

import { sendEmail } from '../../utils/sendEmail';

export default async (req: NextApiRequest, res: NextApiResponse) => {
    if(req.method === 'POST') {
      const { name, email } = req.body;
      await sendEmail({ name, email });
      return res.status(200).end();
    }
    return res.status(404).json({
        error: {
            code: 'not_found',
            messgae: "The requested endpoint was not found or doesn't support this method."
        }
    });
}

ステップ4

このステップでは、我々のAPIでSendGridを使用することができるキーを作成することに集中しますpage. ダッシュボードにアクセスしたら、次のオプションに移動します

オプションを選択すると次のように表示されます

APIキーの生成が完了したら、ファイルの小さな変更を行いますsendEmail.js

import fetch from 'node-fetch'

const SENDGRID_API = 'https://api.sendgrid.com/v3/mail/send'
const SENDGRID_API_KEY = 'YOU_KEY'

const sendEmail = async ({ name, email }) => {...}

export { sendEmail };

ステップ5

この最後のステップでは、メールを送信できるように、UIを実装します.デザインは非常に簡単です./pages/index.js

import React from 'react';

import Registry from './registry';

const Index = () => <Registry />;

export default Index;

/pages/registry.js

import React, { useState } from 'react';

const Registry = () => {
    const [state, setState] = useState({ name: '', email: '' });
    const handleChange = event => {
      const { name, value } = event.target;
      setState({
        ...state,
        [name]: value
      });
    }
    const handlePress = () => {
      fetch('/api/send-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: state.name, email: state.email })
      });
    }
    return (
        <>
      <div>
      <label>
        Name
        <input
          name="name"
          type="text"
          onChange={handleChange}
        />
      </label>
      </div>
      <label>
        Email
        <input
          name="email"
          type="email"
          onChange={handleChange}
        />
      </label>
      <div>
      <button onClick={handlePress}>Send</button>
      </div>
        </>
    );
}

export default Registry;

あなたがどのように多くの入力を扱うかについて疑問に思うならば、私は以下を推薦しますarticle このチュートリアルで使用するパターンを詳細に説明します.メイントピックに戻ると、すべての手順を完了したら、次の結果が表示されます.


プロジェクトリソース:https://github.com/MAPESO/nextjs-sendgrid