Next.js와 Hisend SDK를 사용해 이메일 보내기

Source: Dev.to

사전 요구 사항

• App Router를 사용하는 Next.js 프로젝트
• Node.js 설치 완료
• 이메일 발송을 위한 인증된 도메인

Hisend 설정하기

1. 회원가입 – hisend.app 에 접속해 무료 계정을 만든다.
2. 프로젝트 생성 – 첫 번째 워크스페이스/프로젝트를 설정한다.
3. 도메인 추가 – 이메일을 보낼 도메인(예: yourdomain.com)을 입력한다.
4. DNS 구성 – Hisend가 SPF, DKIM, DMARC 레코드를 생성한다. 이를 DNS 제공업체(Cloudflare, Vercel, Hetzner 등)에 추가해 도메인을 인증한다.
5. API 키 생성 – 프로젝트 설정에서 새 API 키를 만들고 나중에 사용할 수 있도록 복사한다.

Hisend SDK 설치

npm install @hisend/sdk
# or yarn add @hisend/sdk
# or pnpm add @hisend/sdk
# or bun add @hisend/sdk

API 키 설정

프로젝트 루트에 있는 .env.local 파일에 키를 추가한다:

HISEND_API_KEY=your_api_key_here

라우트 핸들러 만들기

App Router에서는 비밀 정보를 서버 측에 두기 위해 서드파티 API 호출을 라우트 핸들러에 배치한다.

app/api/send/route.ts(또는 TypeScript를 사용하지 않을 경우 .js) 파일을 만든다:

import { NextResponse } from 'next/server';
import { Hisend } from '@hisend/sdk';

// Initialize the SDK with your API key
const hisend = new Hisend(process.env.HISEND_API_KEY);

export async function POST(request: Request) {
  try {
    const { email, name } = await request.json();

    const data = await hisend.emails.send({
      from: 'Acme Team ', // must match your verified domain
      to: [email],
      subject: `Welcome to the app, ${name}!`,
      html: `
## Hi ${name},

Thanks for signing up. We are thrilled to have you on board.

Cheers,
The Acme Team
      `,
    });

    return NextResponse.json({ success: true, data });
  } catch (error) {
    return NextResponse.json(
      { success: false, error: 'Failed to send email' },
      { status: 500 }
    );
  }
}

클라이언트에서 API 호출하기

'use client';

export default function SignupButton() {
  const sendWelcomeEmail = async () => {
    await fetch('/api/send', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        email: 'user@example.com',
        name: 'Alex',
      }),
    });
    alert('Email sent successfully!');
  };

  return (
    <button onClick={sendWelcomeEmail}>Send Welcome Email</button>
  );
}

왜 Hisend를 선택해야 할까?

• GDPR 기본 제공 – Hetzner(뉘른베르크)와 AWS(프랑크푸르트)에서 호스팅; 데이터가 EU를 벗어나지 않는다.
• 간편한 이메일 조회 – 하나의 요청으로 본문, 발신자 이름, 첨부파일을 모두 반환한다.
• 네이티브 스레딩 – API를 통해 이메일 대화를 직접 관리할 수 있다.
• 자동 포워딩 – 별도 작업 없이 내장 지원을 제공한다.

전체 문서를 확인하고 hisend.app에서 이메일 발송을 시작해 보세요.

행복한 코딩 되세요! 🚀