Next.JS 18, 이메일 보내는 코드 (Node Mailer)

export default async function handler(req, res) {

    const nodemailer = require('nodemailer');

    let email = req.body.email;
    let otpCode = req.body.otpCode;

    let transporter = nodemailer.createTransport({
        service: 'gmail',
        host: 'smtp.gmail.com',
        port: 587,
        secure: false,
        auth: {
          user: process.env.NODEMAILER_USER,
          pass: process.env.NODEMAILER_PASS,
        },
      });
      
      let info = await transporter.sendMail({
        from: `"이메일 입력" <${process.env.NODEMAILER_USER}>`,
        to: email,
        subject: 'Email OTP Verification',
        html : `여기에 html 파일 입력`,
    });
    
    console.log("Mail sented", info.messageId);
    return res.status(200)
}

 

 

Next.JS는 SSR 서버사이드 렌더링의 정점이라고 불리우는 프레임워크입니다.

서버사이드 렌더링은 React와는 다르게 서버가 유저의 HTML를 생성하고 보내는 방식이고, React의 방식은 JS파일을 렌더링해서 html 파일로 만든다는 차이가 있습니다.

 

즉, SSR은 서버가 유저에게 보여줄 HTML을 생성,

CSR 은 클라이언트가 보여줄 파일을 렌더링한다는 차이가 있죠

 

이 구조 때문에 SSR에서는 서버에서 보안을 유지해야 하는 API 키 등을 별도의 방식 없이 손쉽게 숨기고 유출 방지를 할 수 있습니다. 별도의 API 서버 구축 없이요

 

API 서버 

엄밀히 말하자면 NEXT JS 안의 CustomServer 식으로 Node.js 엔진을 이용하는 것과 다를 게 없긴 하지만요

우선 현존하는 Next.js의 폴더 기반 라우팅은 일부 버그가 있기 때문에

 

프로젝트 폴더에 /pages/api 폴더를 생성해주면 서버 자체는 생성이 끝납니다.

여기에 [api 주소].js를 작성해주면 끝이죠

 

메일 발송 코드

선행되어야 할 작업이 하나 있는데 npm으로 nodemailer를 설치해야 합니다

npm install nodemailer

 

를 먼저 실행 후 api주소 .js 파일에 아래 코드를 붙여넣습니다.

(맨 위에 코드랑 1도 다를 것 없습니다 )

 

export default async function handler(req, res) {

    const nodemailer = require('nodemailer');

    let email = req.body.email;
    let otpCode = req.body.otpCode;

    let transporter = nodemailer.createTransport({
        service: 'gmail',
        host: 'smtp.gmail.com',
        port: 587,
        secure: false,
        auth: {
          user: process.env.NODEMAILER_USER,
          pass: process.env.NODEMAILER_PASS,
        },
      });
      
      let info = await transporter.sendMail({
        from: `"이메일 입력" <${process.env.NODEMAILER_USER}>`,
        to: email,
        subject: 'Email OTP Verification',
        html : `여기에 html 파일 입력`,
    });
    
    console.log("Mail sented", info.messageId);
    return res.status(200)
}

 

그리고 .env 파일을 생성하고

각각의 변수에 해당하는 값들을 넣어주면 됩니다

 

물론 저의 경우 구글의 SMTP 서버를 사용했지만, 실제로는 자체 구축된 사내 서버를 사용해도 상관 없습니다.

NextJS의 장점 중의 하나는 별도의 서버 구축 없이 위와 같은 사용이 가능하다는 점도 한목 하죠