Интеграция Resend для отправки транзакционных email

Интеграция Resend для транзакционных email

Resend — современный email API с нативной поддержкой React Email, понятной документацией и щедрым бесплатным тарифом (3 000 писем/месяц). Подходит для SaaS-стартапов и приложений, которые хотят быстро подключить надёжную транзакционную почту.

Установка и первая отправка

npm install resend

import { Resend } from 'resend';

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

// Простая отправка
const { data, error } = await resend.emails.send({
  from: 'Acme <[email protected]>',
  to: ['[email protected]'],
  subject: 'Добро пожаловать в Acme!',
  html: '<h1>Привет!</h1><p>Спасибо за регистрацию.</p>',
});

if (error) {
  console.error('Email error:', error);
}

С React Email шаблонами

import { Resend } from 'resend';
import { render } from '@react-email/render';
import WelcomeEmail from './emails/WelcomeEmail';

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

export async function sendWelcomeEmail(user: { email: string; name: string }) {
  const html = render(
    <WelcomeEmail name={user.name} loginUrl="https://app.acme.com/login" />
  );

  await resend.emails.send({
    from: 'Acme Team <[email protected]>',
    to: user.email,
    subject: 'Добро пожаловать в Acme!',
    html,
  });
}

Батчевая отправка

// До 100 писем за один запрос
await resend.batch.send([
  {
    from: '[email protected]',
    to: '[email protected]',
    subject: 'Ваш инвойс готов',
    html: invoiceHtml1,
  },
  {
    from: '[email protected]',
    to: '[email protected]',
    subject: 'Ваш инвойс готов',
    html: invoiceHtml2,
  },
]);

Webhooks для отслеживания статусов

Resend отправляет webhooks при изменении статуса письма:

// POST /api/webhooks/resend
app.post('/api/webhooks/resend', express.raw({ type: 'application/json' }), async (req, res) => {
  const signature = req.headers['resend-signature'];
  // Верифицировать подпись через svix
  const event = JSON.parse(req.body);

  switch (event.type) {
    case 'email.sent':
      await db.emailLogs.update({ emailId: event.data.email_id, status: 'sent' });
      break;
    case 'email.delivered':
      await db.emailLogs.update({ emailId: event.data.email_id, status: 'delivered' });
      break;
    case 'email.bounced':
      await db.users.markEmailBounced(event.data.to[0]);
      break;
    case 'email.complained':
      await db.users.unsubscribe(event.data.to[0]);
      break;
  }

  res.status(200).end();
});

Настройка домена

1. Добавить домен в Resend Dashboard → Domains
2. Добавить DNS-записи: SPF (TXT), DKIM (TXT × 3), Return-Path (MX)
3. Дождаться верификации (обычно < 5 минут)

После верификации можно использовать from: '[email protected]' вместо @resend.dev.

Сроки

Базовая интеграция Resend + 2–3 шаблона React Email — 1–2 дня. С настройкой домена, webhooks и логированием — 3–4 дня.