Next.js에서 nodemailer 사용해보기

버튼을 누르면 인자를 받아서 메일이 보내고 싶어졌다...

먼저 메일에 들어갈 Interface를 작성합니다

export interface IMailData {
  from?: string | undefined,	// 보내는사람
  to: string,					// 받는사람
  subject: string,				// 제목
  text: string,					// 내용
  html?: string					// html로 보여줄내용
}

클라이언트단에서 보낼 데이터를 보내기

// 메일 데이터 값 넣기
const emailData : IMailData = {
          to: inquiry.email,
          subject: inquiry.title,
          text: inquiry.content,
        };

        try {
          const mailResult = await sendEmail(emailData);	// 메일을 보내고 결과 값을 담기
          console.log(mailResult);
        }catch (err){
          console.error(err);
        }

api를 호출하는 코드 작성

// pages/api/send-email.ts
꼭 위에 경로에 파일을 만들어야지 api를 제대로 인식한다
다른 폴더에 만들고 싶으면 next.config 파일에서 path를 지정해줘야합니다

import { IMailData } from "@/pages/api/send-email";

// 메일을 불러오는 api
export const sendEmail = async (emailData: IMailData) => {
  console.log(emailData)
  const response = await fetch('/api/send-email', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(emailData),
  });
  return response.json();
}

메일을 처리하는 node 코드

import nodemailer from 'nodemailer';
import { NextApiRequest, NextApiResponse} from "next";

// 대문자 POST로 gmail과 연결해줍니다
export const POST = async (req: NextApiRequest, res: NextApiResponse) => {
  const transporter = nodemailer.createTransport({
    service: 'gmail',
    auth: {
      user: process.env.MAIL_USER, // Gmail 주소 따로 환경변수에 저장
      pass: process.env.MAIL_PASS, // Gmail 앱 비밀번호
    },
  })

  // 메일 데이터 구성
  const mailData : IMailData = {
    from: process.env.MAIL_USER, 		// 발신자 주소
    to: req.body.to, 					// 수신자 주소
    subject: `메일이 등록 되었습니다. ` , 	// 메일 제목
    text:`내용 :  ${req.body.text}` ,
    html: `<div>
            <h1>제목 : [${req.body.subject}]</h1>
              내용 :  ${req.body.text}
              </div>`
  };

  try {
    // 메일 전송
    const info = await transporter.sendMail(mailData);
    console.log('Email sent: %s', info.messageId);


    // 응답 보내기
    return res.status(200).json({ status: 'success' });

  } catch (err) {
    console.log('Send mail error:', err);
    return res.status(500).json({ status: 'error' });
  }
}

export default POST;

잔버그들이 있지만 메일이 정상적으로 옵니다