[Next JS] Nodemailer로 메일 보낼 때 커스터마이징하기

이 글에서는 Nodemailer로 메일 보낼 때 커스터마이징하는 방법을 알아보도록 한다.

 

1. Email Template 만들기

 

/src/component/emailTemplate 경로 안에 .jsx 파일을 만들어준다.

.jsx 파일을 쓰는 이유는 그냥 편해서이다. Next JS 프레임워크를 쓰는 김에 emailTemplate도 리액트 컴포넌트 형식으로 만들어서 쓰면 직관적으로 보기 좋기 때문에 써보았다.

아래에서 살펴보겠지만, 원래 nodeMailer로 보내는 메일의 형식은 text로 작성되어야 하는데 스타일링 커스터마이징을 하려면 리액트처럼 작성하기 간편한게 없다.

/src/component/emailTemplate/emailTemplate.jsx

import React from "react";

const EmailTemplate = () => {
  return (
    <div
      style={{
        height: 500,
        borderStyle: "solid",
        borderColor: "#6950f4",
        borderWidth: 1,
      }}
    >
      <header
        style={{
          display: "flex",
          alignItems: "center",
          height: "15%",
          backgroundColor: "#6950f4",
          padding: 8,
        }}
      >
        <div
          style={{
            color: "white",
            fontSize: 28,
            fontWeight: "bolder",
          }}
        >
          이메일 테스트하는 중
        </div>
      </header>
      <div
        style={{
          height: "70%",
        }}
      >
        <div
          style={{
            padding: 16,
            height: "40%",
          }}
        >
          <h3>안녕하세요</h3>
          <h3>아래 버튼을 눌러보세요</h3>
        </div>
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "40%",
          }}
        >
          <div
            style={{
              width: "50%",
              backgroundColor: "cornflowerblue",
              textAlign: "center",
              borderRadius: 8,
              fontWeight: "bold",
              color: "white",
              padding: 24,
            }}
          >
             <a href="https://www.google.com" target='_blank'>구글 홈으로 가기</a>
          </div>
        </div>
      </div>
      <footer
        style={{
          height: "15%",
          backgroundColor: "gray",
        }}
      >
        <div
          style={{
            fontSize: 14,
            padding: 16,
            color: "white",
          }}
        >
          본 메일은 발신전용입니다.
        </div>
      </footer>
    </div>
  );
};

export default EmailTemplate;

 

styled-component나 module.css 형식으로 다 해봤지만, 메일이 발송되었을 때 스타일링이 적용되지 않았기에 그냥 각 태그의 style 프로퍼티에 스타일 객체 데이터를 담아서 꾸며보니 적용이 되었다.

 

2. API route 함수 안에서 적용하기

이제 api 루트 안에서 emailTemplate을 보내보도록 하자.

말했다시피 mailOptions 객체 안의 html 키의 밸류 값을 적어줘야 하는데 문자열만 가능하므로, 그대로 .jsx 파일을 import 해서 넣어줄 수는 없다.

ReactDOMserver의 renderToStaticMarkup 메서드를 통해서 템플릿을 문자열로 변환시켜주도록 한다.

/api/sendEmail.js

import nodemailer from "nodemailer";
import EmailTemplate from "../../src/component/emailTemplate/emailTemplate";
import ReactDOMServer from "react-dom/server";

export default async function handler(req, res) {
  if (req.method !== "POST") {
    return res.status(405).end(); // Method Not Allowed
  }

  try {
    // Nodemailer transporter 생성
    const transporter = nodemailer.createTransport({
      service: "gmail",

      auth: {
        user: gmail 주소,
        pass: 'abcdefghi', // Gmail '앱 비밀번호'
      },
    });

    // 전송할 이메일 내용 설정
    const mailOptions = {
      from: "mygmail@gmail.com",
      to: "yourmail",
      subject: "테스트 이메일",
      html: ReactDOMServer.renderToStaticMarkup(<EmailTemplate />),

    };

    // 이메일 전송
    const info = await transporter.sendMail(mailOptions);

    console.log("이메일 전송 성공:", info.response);
    res.status(200).json({ success: true });
  } catch (error) {
    console.error("이메일 전송 실패:", error.message);
    res.status(500).json({ success: false, error: error.message });
  }
}

 

3. Email 확인

 

이메일 본문에 있는 버튼을 눌러주면 google 홈페이지로 이동할 수 있는 EmailTemplate 작성 완성.

 

4. 참고 사항

.jsx 파일로다가 만드니까 javascript 코드를 써도 되는가 싶었는데 안 된다. 보안 및 해킹 문제로 직결 되기도 하니 각 플랫폼에서 막아놓은 것 같다.