안녕하세요, Hoda입니다!
얼마 전에 Next.js와 Resend를 조합해서 인증 시스템을 구축해 보았는데요. 미래의 저를 위한 메모 겸, 어떻게 설정했는지 그 과정을 정리해 둡니다.
Resend란 무엇인가요?
한마디로 Resend는 "an email-sending API built for developers."
기존의 이메일 발송 서비스와 비교했을 때, 개발자가 웹 앱, 모바일 앱 등 현대적인 애플리케이션에 이메일 기능을 훨씬 더 간단하게 추가할 수 있도록 설계되었습니다.
Resend는 다양한 언어와 프레임워크를 지원하므로 다음과 같은 환경에서 곧바로 시작할 수 있습니다.
- JavaScript/TypeScript: Node.js, Next.js, React, Express 등
- 기타 언어: Python, PHP (Laravel), Ruby (Rails), Go, Rust, Elixir, Java, .NET 등
Resend로 할 수 있는 것들
Resend는 단순히 이메일을 보내는 것뿐만 아니라, 개발에 유용한 기능들을 함께 제공합니다.
- 가시성 및 관리: 발송된 모든 이메일의 상세 상태(발송됨, 읽음, 클릭됨, 반송됨 등)를 대시보드에서 바로 확인할 수 있습니다.
- 도메인 전달력 관리: 본인 소유의 도메인을 인증하여 수신자의 받은 편지함에 이메일이 안정적으로 도달하도록 합니다.
- React 기반 템플릿: React 컴포넌트를 사용하여 이메일의 HTML을 빌드할 수 있으므로 프론트엔드 개발자에게 매우 익숙합니다.
- 팀 공유: 인증 없이 48시간 동안 조회할 수 있는 공개 링크 형태로, 발송된 이메일의 내용을 팀원들과 공유할 수 있습니다.
시작하기 위한 기본 단계
프로젝트에 Resend를 도입하는 일반적인 흐름은 다음과 같습니다.
1. 사전 준비 사항
먼저 공식 사이트에서 계정을 만들고 다음 두 가지를 완료해야 합니다.
- API 키 생성: 애플리케이션이 Resend를 호출할 수 있도록 인증 키를 발급합니다.
- 도메인 인증: 소유하고 있는 도메인에서 이메일을 발송할 수 있도록 설정합니다.
2. SDK 설치
예를 들어 Node.js 환경에서는 다음 명령어로 SDK를 설치합니다.
npm install resend3. 기본 구현 방법
(Next.js 같은 환경에서의) 가장 간단한 발송 코드는 다음과 같습니다. API 키를 환경 변수로 설정한 다음, resend.emails.send 메서드를 호출하기만 하면 됩니다.
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
await resend.emails.send({
from: 'you@yourdomain.com',
to: 'recipient@example.com',
subject: 'Hello World',
html: '<p>This is my first email from Resend!</p>'
});미리 알아두면 좋은 “테스트 발송” 팁
개발 중에 실제 이메일 주소로 반복해서 메일을 보내면 도메인 평판에 악영향을 미칠 수 있으며, 추후 이메일이 스팸으로 분류될 위험이 커집니다.
이를 방지하기 위해 Resend는 도메인 평판을 깎지 않고 다양한 시나리오를 시뮬레이션할 수 있는 전용 테스트 주소를 제공합니다.
- 성공 테스트:
delivered@resend.dev(으)로 발송합니다. - 반송(Bounce) 테스트:
bounced@resend.dev(으)로 발송합니다. - 스팸 신고 테스트:
complained@resend.dev(으)로 발송합니다.
이러한 주소들을 사용하면 프로덕션 환경을 더럽히지 않고 안전하게 개발할 수 있습니다.
Resend를 하나의 이미지로 표현하자면, 똑똑한 국제 특송 카운터와 같습니다. 복잡하고 오래된 절차(메일 서버를 직접 구성하는 일)를 알 필요 없이, 주소와 메시지만 건네주면 Resend가 알아서 안전하게 라우팅 처리를 해주고, 지금 소화물이 정확히 어디에 있는지 실시간으로 알려줍니다.
Next.js 프로젝트에 Resend 추가하기
1. 사전 준비 사항
구현을 시작하기 전에 Resend 대시보드에서 다음 두 가지를 처리해야 합니다.
- API 키 생성: 앱에서 인증에 사용할 키를 발급받습니다.
- 도메인 인증: 메일을 발송할 도메인을 등록하고 인증합니다.
참고로 무료 플랜에서도 한 달에 3,000건의 트랜잭션 이메일을 보낼 수 있으므로 소규모 프로젝트에는 넘쳐날 정도입니다.
2. SDK 설치
먼저 프로젝트의 루트 디렉터리에서 다음 명령어를 실행하여 Resend Node.js SDK를 설치합니다.
npm install resend3. 이메일 템플릿 생성
Resend가 돋보이는 이유는 React 컴포넌트를 이메일 템플릿으로 직접 사용할 수 있다는 점입니다.
예를 들어 components/email-template.tsx라는 파일을 만들고 다음과 같이 작성합니다.
import * as React from 'react';
interface EmailTemplateProps {
firstName: string;
}
export const EmailTemplate: React.FC<Readonly<EmailTemplateProps>> = ({
firstName,
}) => (
<div>
<h1>Welcome, {firstName}!</h1>
</div>
);4. 전송 로직 구현 (API Route)
다음으로, 실제로 이메일을 전송할 API 엔드포인트를 만듭니다. App Router를 사용하는 경우 app/api/send/route.ts에 생성하고(Pages Router의 경우 pages/api/send.ts 사용),
여기서는 RESEND_API_KEY 환경 변수를 사용하여 Resend를 초기화하고, 방금 생성한 템플릿을 사용하여 이메일을 보냅니다.
import { EmailTemplate } from '../../../components/EmailTemplate';
import { Resend } from 'resend';
const resend = new Resend(process.env.RESEND_API_KEY);
export async function POST() {
try {
const { data, error } = await resend.emails.send({
from: 'Acme <onboarding@resend.dev>', // your verified domain
to: ['delivered@resend.dev'], // recipient
subject: 'Hello world',
react: EmailTemplate({ firstName: 'John' }), // using the React template
});
if (error) {
return Response.json({ error }, { status: 500 });
}
return Response.json(data);
} catch (error) {
return Response.json({ error }, { status: 500 });
}
}5. 전송 상태 확인 및 테스트
Next.js에서 보낸 이메일이 실제로 어떻게 처리되었는지 Resend 대시보드에서 상세하게 확인할 수 있습니다.
- 이메일 이벤트 추적: 로그를 따라가며 발송된 메일이 “발송됨(sent)”, “전송됨(delivered)”, 또는 “반송됨(bounced — 수신자 서버에서 거부됨)” 중 어떤 상태인지 확인합니다.
- 테스트 주소 활용: 개발 중에는 본인의 이메일 주소 대신 아래의 테스트 주소를 사용하여 동작을 확인하는 것이 좋습니다.
- 성공 테스트:
delivered@resend.dev(으)로 발송하여 정상 전달 시 동작을 확인합니다. - 반송 테스트:
bounced@resend.dev(으)로 발송하여 에러 핸들링이 어떻게 동작하는지 테스트합니다.
- 성공 테스트:
Next.js에 이메일 기능을 설정하는 과정을 비유하자면, 매장 뒤편에 전용 배송 라인을 구축하는 것과 같습니다.
이미 잘 알고 있는 도구인 React 컴포넌트로 편지를 작성한 뒤 Resend의 전용 배송 라인(SDK/API)에 태워 보내는 식입니다. 그러면 전 세계 어디든 자동으로 배송되며, 안전하게 도착했다는 실시간 영수증까지 받아볼 수 있습니다. 결국 이런 매끄러운 시스템을 완성하게 됩니다.
