[Next.js] 포트폴리오에서 누군가 나에게 이메일을 보낼 수 있는 기능 개발하기

저는 '네이버' 이메일을 이용하기로 했습니다. 

목적: 저의 포트폴리오에 이메일주소, 제목, 내용을 쓸 수 있는 칸을 두고 누군가가 저에게 이메일을 보낼 수 있도록 합니다.

 

1. 네이버에서 SMTP 앱 생성 및 비밀번호 생성

- 네이버 웹사이트에서 프로필 설정 버튼을 클릭합니다.

- 내 프로필 옆에 있는 보안설정 버튼을 클릭합니다.

- 알림을 받길 원하는 디바이스를 클릭하고 다음을 클릭합니다.

- 2단계 인증을 허용하고, 관리를 클릭합니다.

- 종류를 선택하거나 직접입력합니다.

- 비밀번호 생성하기 버튼을 클릭하여 3번의 비밀번호 확인에서 생성된 비밀번호를 확인합니다.

 

2. Next.js 를 통해 클라이언트 코드 작성

'use client';
import React, { useState, useEffect } from 'react';
import styles from './Email.module.css'; // CSS Modules import
import { useTranslation } from 'react-i18next';
import Devider from '../(component)/Devider';
import 'animate.css';
import '../../../i18n';

const Email: React.FC = () => {
  const { t, i18n } = useTranslation('common'); // 공통 번역 파일 사용
  const [isInitialized, setIsInitialized] = useState(false);
  const [formData, setFormData] = useState({
    email: '',
    subject: '',
    message: '',
  });
  const [status, setStatus] = useState<string | null>(null);

  useEffect(() => {
    if (i18n.isInitialized) {
      setIsInitialized(true);
    } else {
      const handleInitialized = () => setIsInitialized(true);
      i18n.on('initialized', handleInitialized);
      return () => {
        i18n.off('initialized', handleInitialized);
      };
    }
  }, [i18n]);

  if (!isInitialized) return null;

  // 입력 값 변경 핸들러
  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  // 폼 제출 핸들러
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus(null); // 상태 초기화

    try {
      const response = await fetch('/api/send-email', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (response.ok) {
        setStatus('Email sent successfully!');
        setFormData({ email: '', subject: '', message: '' }); // 입력값 초기화
      } else {
        const errorData = await response.json();
        setStatus(`Failed to send email: ${errorData.message}`);
      }
    } catch (error) {
      console.error(error);
      setStatus('An unexpected error occurred. Please try again later.');
    }
  };

  return (
    <div className={styles.profilePage}>
      <div>
        <div className={styles.defaultFont}>{t('email')}</div>
        <Devider startColor="#F2BED1" endColor="#8C6E79" width={1650} height={5} />
      </div>

      <form className={styles.emailForm} onSubmit={handleSubmit}>
        <input
          type="email"
          name="email"
          placeholder="Your Email"
          value={formData.email}
          onChange={handleChange}
          required
          className={styles.input}
        />
        <input
          type="text"
          name="subject"
          placeholder="Subject"
          value={formData.subject}
          onChange={handleChange}
          required
          className={styles.input}
        />
        <textarea
          name="message"
          placeholder="Message"
          value={formData.message}
          onChange={handleChange}
          required
          className={styles.textarea}
        />
        <button type="submit" className={styles.submitButton}>
          Send Email
        </button>
      </form>
      {status && <div className={styles.statusMessage}>{status}</div>}
    </div>
  );
};

export default Email;

- input 필드3개를 입력하여 이메일주소, 제목, 내용을 받습니다.

 

3. API 라우팅을 활용하여 POST API 제작하기

- 우선, 프로젝트의 최상단에 pages 폴더를 만든 후 , 안에 api 폴더를 만듭니다.

- 그 안에 api 이름으로 파일을 생성합니다. 

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

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'POST') {
    return res.status(405).json({ message: 'Method not allowed' });
  }

  const { email, subject, message } = req.body;

  if (!email || !subject || !message) {
    return res.status(400).json({ message: 'All fields are required.' });
  }

  try {
    // Nodemailer 설정
    const transporter = nodemailer.createTransport({
      host: 'smtp.naver.com',
      port: 587,
      secure: false, // TLS 사용
      auth: {
        user: process.env.EMAIL_USER,
        pass: process.env.EMAIL_PASS,
      },
    });

    // 이메일 전송
    await transporter.sendMail({
      from: `"Website Contact" <${process.env.EMAIL_USER}>`, // 발신자는 Naver 계정
      to: process.env.EMAIL_USER, // 관리자 본인에게 발송
      subject: `[Inquiry] ${subject}`, // 방문자가 입력한 제목
      text: `You have received a new message from your website contact form:\n\n
        From: ${email}\n
        Subject: ${subject}\n
        Message:\n${message}`,
    });

    res.status(200).json({ message: 'Email sent successfully!' });
  } catch (error) {
    console.error('Error sending email:', error);
    res.status(500).json({ message: 'Failed to send email. Please try again later.' });
  }
};

export default handler;

- 이 코드에서는 auth 를 통해 인증을 할 수 있는데 이때, process.env.EMAIL_USER 와 process.env.EMAIL_PASS를 통해 환경 변수를 설정합니다. 

 

 프로젝트 상단의 .env.local 파일을 생성하여 정의합니다. 만약, 로컬이 아니라 프로덕션 환경의 환경변수를 정의하고 싶다면 .env.production 파일에 정의합니다.

 

.env.local 

EMAIL_USER=(아까 설정한 네이버 메일 주소)

EMAIL_PASS=(아까 앱 2차 인증을 통해 받은 비밀번호)

 

이렇게 하면 모든 과정을 끝마치고 실제로 이메일을 보낼 수 있습니다. 

 

 

4. 실제 사용예시