[EmailJS] Next.js에서 이메일 보내는 기능 구현

안녕하세요. 오늘은 이메일 기능 구현을 위해 EmailJS 사용 방법에 대해서 알아보곘습니다.

원래는 Twilio의 Email API를 이용하려고 했지만 회원가입하자마자 로그인이 막혀서... 결국 사용하지 못했습니다.

제가 구현하려는 기능에 EmailJS를 이용하는 것이 좋은 방법은 아닙니다.

우선은 EmailJS로 구현을 해본 후 나중에 제 의도에 더 알맞은 이메일 서비스를 찾아보겠습니다..!  

---

🐥EmailJS 이용 방법

1.  EmailJS 홈페이지 접속 후 Add New Service 클릭

- 저는 이미 한개를 연동해놔서 Gmail이 있는 겁니다.

 

2.  본인이 사용할 이메일 서비스를 선택합니다.

- 예를 들어 Gmail을 선택하면 Gmail에서 메시지를 보내주는 겁니다.

 

3.  Connect Account를 클릭해서 본인 확인을 해준 후 연동시킵니다.

4.  Email Templates을 클릭한 후 이메일을 보낼 때의 양식을 만들어줍니다.

- 아래 화면에서는 {{token}} 값을 제가 넣어주었는데요. 이 경우 나중에 Next.js에서 token에 제가 원하는 값을 넣어줄 수 있습니다.  {{User_email}}도 마찬가지입니다. 누구에게 이메일을 보낼지 설정해줄 수 있습니다.

 

5.  EmailJS 서비스를 이용하기 위해 필요한 값들을 복사해서 Next.js의 환경변수로 넣어줍니다.

- Account로 이동해서 Public Key를 복사해줍니다.

- Email Templates으로 이동해서 Template ID를 복사해줍니다.

- Email Services로 이동해서 Service ID를 복사해줍니다.

6.  Next.js에서 코드를 작성한다.

- 먼저 emailjs/browser를 설치해주고 코드를 작성합니다.

$ npm install @emailjs/browser --save

  useEffect(() => {
    if (!data?.ok && data?.error) {
      swal(data?.error);
      return;
    }
    if (!data?.email || !data.token) return;
    let templateParmas = { // 템플릿 양식에서 설정했던 변수값들
      user_email: data?.email,
      token: data?.token,
    };
    const sendEmail = async () => {
      let send = await emailjs.send(
        process.env.NEXT_PUBLIC_EMAILJS_SERVICE_ID as string,
        process.env.NEXT_PUBLIC_EMAILJS_TEMPLATE_ID as string,
        templateParmas,
        process.env.NEXT_PUBLIC_EMAILJS_PUBLIC_KEY as string,
      );
      if (send.status === 200) {
        swal("이메일을 확인해주세요");
      }
    };
    sendEmail();
  }, [data]);

emailjs.send(serviceID, templateID, templateParams, publicKey);

위에서 복사해둔 serviceID, templateID, publicKey를 복사해서 넣어줍니다.

templateParams는 템플릿 양식 제작할 때 변수로 설정해놓은 부분에 지정할 값입니다.

 

참고: https://www.emailjs.com/docs/sdk/send/

SDK emailjs.send | EmailJS

---

✨결과물