Next.js + Resend를 활용한 이메일 인증 구현 가이드

---

📧 Next.js + Resend를 활용한 이메일 인증 구현 가이드

이 글에서는 Resend 이메일 API를 활용해 Next.js 앱에서 사용자 이메일 인증을 구현하는 방법을 소개합니다. 또한 이메일 도메인 설정까지 실전 예제로 설명합니다.

---

✅ 1. 이메일 인증 흐름 개요

이메일 인증 로직은 다음과 같은 흐름으로 구성됩니다:

1. 사용자가 이메일 주소를 입력 → "이메일 인증 링크 보내기"
2. 서버에서 인증 토큰 생성 및 Resend를 통해 이메일 발송
3. 사용자가 이메일 내 링크 클릭 → 토큰 검증 → 로그인 or 회원가입 처리
4. 추가: 도메인 설정을 통해 스팸함 방지 및 신뢰도 향상

---

🛠️ 2. 프로젝트 세팅

2.1 Next.js 프로젝트 생성

npx create-next-app@latest email-auth-app
cd email-auth-app

2.2 필요 라이브러리 설치

npm install resend nanoid @auth/core @auth/nextjs

• resend: 이메일 전송 API
• nanoid: 인증 토큰 생성용
• @auth/core + @auth/nextjs: 인증 흐름 구현 (또는 직접 구현 가능)

---

✉️ 3. Resend 설정 및 API 연동

3.1 Resend 계정 만들기 및 API Key 발급

• https://resend.com/ 접속
• 대시보드 → API Keys → 새 키 생성
• .env.local에 저장

RESEND_API_KEY=your_api_key_here
FROM_EMAIL=your_verified@domain.com
BASE_URL=http://localhost:3000

3.2 이메일 전송 로직 구현

lib/email.ts

import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function sendVerificationEmail(email: string, token: string) {
  const verifyLink = `${process.env.BASE_URL}/verify?token=${token}`;

  await resend.emails.send({
    from: process.env.FROM_EMAIL!,
    to: email,
    subject: '이메일 인증 링크입니다',
    html: `<p>아래 링크를 클릭하여 인증을 완료하세요:</p><p><a href="${verifyLink}">${verifyLink}</a></p>`,
  });
}

---

🧪 4. 인증 토큰 발급 및 검증 API

4.1 토큰 발급 및 이메일 발송 API

app/api/send-email/route.ts

import { NextResponse } from 'next/server';
import { sendVerificationEmail } from '@/lib/email';
import { nanoid } from 'nanoid';

const tokens = new Map<string, string>(); // 예시: 실제 서비스에선 DB 사용

export async function POST(req: Request) {
  const { email } = await req.json();
  const token = nanoid();
  tokens.set(token, email);

  await sendVerificationEmail(email, token);

  return NextResponse.json({ ok: true });
}

4.2 인증 링크 검증

app/verify/page.tsx

'use client';

import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';

export default function VerifyPage() {
  const [message, setMessage] = useState('검증 중...');
  const params = useSearchParams();
  const token = params.get('token');

  useEffect(() => {
    async function verify() {
      const res = await fetch(`/api/verify-token?token=${token}`);
      const result = await res.json();
      setMessage(result.ok ? '인증 성공! 🎉' : '인증 실패 😢');
    }
    if (token) verify();
  }, [token]);

  return <div>{message}</div>;
}

app/api/verify-token/route.ts

import { NextResponse } from 'next/server';

const tokens = new Map<string, string>(); // 위에서 공유된 것이라고 가정

export async function GET(req: Request) {
  const { searchParams } = new URL(req.url);
  const token = searchParams.get('token');

  if (token && tokens.has(token)) {
    const email = tokens.get(token);
    tokens.delete(token); // 재사용 방지
    return NextResponse.json({ ok: true, email });
  }

  return NextResponse.json({ ok: false });
}

---

🌐 5. Resend 도메인 인증 설정

Resend로 보낸 메일이 스팸처리되지 않도록 하려면 도메인 설정이 꼭 필요합니다.

5.1 도메인 연결하기

1. Resend 대시보드 → Domains → Add Domain
2. 예: mail.yourdomain.com 입력
3. 아래 DNS 설정값을 복사

5.2 DNS 설정 (호스팅 업체에서)

DNS 관리자 (예: 카페24, GoDaddy, Cloudflare 등)에서 다음 레코드를 추가:

Type Name Value

TXT	mail._domainkey.yourdomain.com	(DKIM 값)
TXT	yourdomain.com	v=spf1 include:resend.com ~all
CNAME	emXXXX.yourdomain.com	uXXXX.wl.sendgrid.net

→ 모든 레코드 설정 후, Resend에서 "Verify" 버튼 클릭

5.3 FROM 주소 확인

설정 완료되면 Resend에서 yourname@yourdomain.com 형태의 발신 주소를 검증 완료 상태로 사용 가능.

---

🎯 마무리

이메일 인증은 로그인 없이 신원을 확인할 수 있는 강력한 수단입니다. 특히 소셜 로그인 없이 간단한 인증을 구현하고 싶다면 Resend + Next.js 조합은 매우 효율적입니다.

✅ 구현 요약:

• Resend를 통해 인증 메일 발송
• nanoid로 토큰 생성 후 메일에 포함
• 링크 클릭 → Next.js 페이지에서 검증
• Resend 도메인 인증으로 스팸함 방지

---

🔗 참고 링크

• Resend 공식 문서
• Next.js App Router 공식 문서
• nanoid

---