twilio SendGrid 웹 API를 Next Js와 통합하는 방법은 무엇입니까?

정적 사이트이든 동적 사이트이든 웹 앱을 개발할 때마다 대부분의 경우 일종의 문의 양식이 필요합니다.

Next.js가 무엇인가요?

It is used to build server-side rendering and static web applications using React.

SendGrid란?

SendGrid is a cloud-based SMTP provider that allows you to send email without having to maintain email servers. SendGrid manages all of the technical details, from scaling the infrastructure to ISP outreach and reputation monitoring to whitelist services and real-time analytics. In short, it is used to send emails.

이미 next.js 앱 설정이 있다고 가정하고 SendGrid API를 통합하여 이메일을 보내는 것부터 시작하겠습니다. 없는 경우 next.js 앱을 만드는 방법에 대해 이 문서guide를 확인하세요.

이를 달성할 수 있는 두 가지 방법이 있습니다. 하나는 SendGrid에서 외부library를 사용하는 것이고 두 번째는 필요한 모든 데이터와 함께 POST에 https://api.sendgrid.com/v3/mail/send 요청을 하는 것입니다. 이메일을 보내기 위해 프로젝트에 새 라이브러리를 포함하고 싶지 않습니다.

Nextjs에서 SendGrid 웹 API로 이메일을 보내고 프로젝트 루트 디렉터리의 sendMail.js 폴더에 파일utils을 만드는 방법을 살펴보겠습니다. 이제 프로젝트의 디렉토리 구조는 다음과 같아야 합니다.


sendMail.js 파일에 다음 코드를 추가합니다.

import fetch from "node-fetch";

const SENDGRID_API_URL = "https://api.sendgrid.com/v3/mail/send";
const SENDGRID_API_KEY = process.env.NEW_SENDGRID_API_KEY;

const sendMailToMe = async (
   recepient_email, // email_address to send mail
  name_, // from name on email
  subject = "sample subject",
  client_message, // value we receive from our contact form
  client_email // value we receive from our contact form
) => {
  const sgResponse = await fetch(SENDGRID_API_URL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${SENDGRID_API_KEY}`,
    },
    body: JSON.stringify({
      personalizations: [
        {
          to: [
            {
              email: recepient_email,
            },
          ],
          subject: subject,
        },
      ],
      from: {
        email: "YOUR VERIFIED SENDGRID MAIL HERE",
        name: "YOUR NAME",
      },
      content: [
        {
          type: "text/html",
          value: `<strong>Client Name: ${name_} </strong> \n <p> 
                  sent you a query regarding <strong>${subject} </strong></p>
                  \n <p>Client's Message: <strong>${client_message}</strong><\p> 
                  <p>Client's Email : <strong> ${client_email} </strong></p>`,
        },
      ],
    }),
  });
  return sgResponse;
};

export { sendMailToMe };

여기서 우리는 node-fetch 요청을 만들기 위해 POST를 사용하고 있으므로 npm i node-fetch를 통해 설치해야 합니다. 이것은 window.fetch를 Node.js로 가져오는 경량 모듈이며 또한 이 함수는 우리가 포함할 몇 가지 값을 기대합니다. 문의 양식에서. 이메일을 보내고 API key을 확인하려면 SendGridSender Identity가 필요하고 env 변수로 next.config.js에 저장합니다.

그런 다음 문의 양식에서 데이터를 보내는 데 사용할 Next.js에서 API 엔드포인트를 생성해야 합니다. 이 작업은 pages/api 폴더에 새 파일을 생성하여 수행됩니다. 이api 폴더는 Nextjs 앱의 모든 api 끝점을 만드는 데 사용되는 Nextjs의 특수 폴더이며 이러한 끝점은 필요할 때만 호출됩니다.

이렇게 앱의 senMail.js 폴더에 pages/api를 추가합니다.



이 파일에 다음 코드를 추가하십시오.

import { sendMailQueryToMe } from "../../utils/sendMailToMe";

export default async function handler(req, res) {
  if (req.method === "POST") {
    // req.body carries all the data

    try {
      const { email, name_, subject, client_message } = req.body;

      if (
        typeof (email || name_ || subject || client_message) === "undefined"
      ) {
        console.log(" ************* Invalid Data received ************ ");

        return res
          .status(400)
          .send({ error: "bad request, missing required data!" });
      } else {
        //  Data received as expected
        try {
          const sendGridResponse = await sendMailQueryToMe(
            "[email protected]",
            name_,
            subject,
            client_message,
            email
          );

          return res.status(200).send({
            sg_response: sendGridResponse,
          });
        } catch (err) {
          console.log(
            "ERROR WHILE SENDING MAIL TO *YOU* THROUGH WEB API >> ",
            err
          );

          return res.status(400).send({
            err_message: "bad request",
          });
        }
      }
    } catch (err) {
      console.log("Err while sending Mail through send grid >> ", err);
      return res
        .status(400)
        .send({ error: "Error in sendgrid Service.", errMsg: err });
    }
  }

  res.status(400).send({ error: "bad request" });
}

이제 마지막으로 사용자가 메일을 보낼 수 있는 UI 양식을 만들어야 합니다. 이를 위해 앱의 contact.js 폴더에 pages 파일을 생성하고 다음 코드를 추가합니다.

import React, { useState } from "react";
import MailOutlineIcon from "@material-ui/icons/MailOutline";
import { MenuItem, Input } from "@material-ui/core";
import TextField from "@material-ui/core/TextField";
import https from "https";

function contact() {
  const [formError, setFormError] = useState({ error: "" });
  const [querySubject, setQuerySetsubject] = useState("");
  const [name_, setName_] = useState("");
  const [clientEmail, setClientEmail] = useState("");
  const [clientMsg, setClientMsg] = useState("");

  const serviceOptions = [
    {
      value: "option1",
      label: "option1",
    },
    {
      value: "option2",
      label: "option2",
    },
    {
      value: "option3",
      label: "option3",
    },
    {
      value: "option4",
      label: "option4",
    },
  ];

  const sendMail = async (
    client_name,
    client_email,
    client_message,
    client_subject
  ) => {
    const data = JSON.stringify({
      name_: client_name,
      email: client_email,
      client_message: client_message,
      subject: client_subject,
    });

    const options = {
      path: "/api/sendMail",
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Content-Length": data.length,
      },
    };

    const req = https.request(options, (res) => {
      // console.log(`statusCode: ${res.statusCode}`);

      res.on("data", (d) => {
        // process.stdout.write(d);
        // console.log("data  from API >> ", JSON.parse(d));
      });
    });

    req.on("error", (error) => {
      setFormError({
        error: "Unable to send your message please try after some time.",
      });
    });

    req.write(data);
    req.end();
  };

  return (
    <div>
      <form
        style={{ display: "flex", flexDirection: "column", padding: "50px" }}
      >
        <Input
          style={{ width: "100%", color: "black" }}
          type="text"
          value={name_}
          placeholder="What is your name ?"
          onChange={(e) => setName_(e.target.value)}
          required
        />
        <Input
          style={{ width: "100%", color: "black" }}
          value={clientEmail}
          type="email"
          placeholder="What is your email ?"
          onChange={(e) => setClientEmail(e.target.value)}
          required
        />
        <TextField
          style={{ width: "100%", color: "black" }}
          id="standard-select-Interest"
          select
          label="What are you interested in ?"
          value={querySubject}
          onChange={(e) => setQuerySetsubject(e.target.value)}
          required
        >
          {serviceOptions.map((option) => (
            <MenuItem key={option.value} value={option.value}>
              {option.label}
            </MenuItem>
          ))}
        </TextField>

        <TextField
          style={{ width: "100%", color: "black" }}
          id="client-message-textarea"
          label="Message"
          multiline
          rows={4}
          value={clientMsg}
          onChange={(e) => setClientMsg(e.target.value)}
        />
        {formError.error ? (
          <div className="form__error">
            <span style={{ color: "black" }}>{formError.error}</span>
          </div>
        ) : (
          ""
        )}
        <div>
          <button
            disabled={!name_ || !clientEmail || !clientMsg || !querySubject}
            type="submit"
            style={
              !name_ || !clientEmail || !clientMsg || !querySubject
                ? {
                    backgroundColor: "#878a8f",
                    color: "white",
                    transform: "scale(1)",
                    cursor: "default",
                    margin: "50px 0",
                  }
                : { margin: "50px 0" }
            }
            onClick={(e) => {
              e.preventDefault();
              sendMail(name_, clientEmail, clientMsg, querySubject);
            }}
          >
            <MailOutlineIcon /> Send
          </button>
        </div>
      </form>
    </div>
  );
}

export default contact;

이메일을 보내거나 받을 수 있는 완전한 기능을 갖춘 연락처 양식을 가지고 있는 모든 사람들입니다.

제 연락처 양식에 이것을 구현했습니다. 제 Site에서 시도할 수 있습니다.