Интеграция Resend для отправки транзакционных писем в веб-приложениях

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

Мы сталкивались с проектами, где транзакционные письма не доходили до пользователей: SMTP-серверы блокировали, DKIM не был настроен, а шаблоны приходилось верстать в сыром HTML. В результате терялись заявки, подтверждения и сбросы паролей — бизнес терпел убытки. Потери от недоставленных писем достигали 15% конверсии, а клиенты уходили к конкурентам. Resend решает эти проблемы из коробки: современный email API с нативной поддержкой React Email, бесплатным тарифом на 3000 писем в месяц и автоматической настройкой доставляемости. В этой статье расскажем, как мы подключаем Resend в реальных проектах и какие результаты это даёт.

Почему Resend, а не SMTP или старые сервисы?

Настройка SMTP вручную — это N+1 попыток, падение доставляемости, спам-фильтры. Resend предлагает готовый API, который гарантирует доставку. В отличие от SendGrid и Amazon SES, Resend проще: не нужно вручную настраивать DKIM/SPF — всё делается автоматически. Кроме того, React Email работает из коробки, что ускоряет разработку шаблонов в разы. Наш опыт показывает: время на интеграцию сокращается в 2 раза по сравнению с классическими решениями, а доход от восстановленных уведомлений окупает затраты за 1-2 месяца.

Resend в 2 раза быстрее настраивается, чем классический SMTP.

Как мы интегрируем Resend в ваше приложение?

Мы подключаем Resend, настраиваем домен, разрабатываем шаблоны React Email, организуем батчевую отправку и логирование. Используем TypeScript и Next.js 14 с Server Actions для отправки из серверных компонентов.

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

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 писем за один HTTP-запрос. Это критично для рассылки инвойсов, уведомлений или подтверждений в моменты пиковой нагрузки. Resend обрабатывает их параллельно, экономя время и ресурсы.

await resend.batch.send([ { from: '[email protected]', to: '[email protected]', subject: 'Ваш инвойс готов', html: invoiceHtml1, }, { from: '[email protected]', to: '[email protected]', subject: 'Ваш инвойс готов', html: invoiceHtml2, }, ]); 

Как настроить домен для Resend (пошагово)?

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

После верификации можно использовать from: '[email protected]' вместо @resend.dev. Resend документация утверждает: "При корректной настройке DKIM и SPF доставляемость превышает 99%."

Как избежать попадания в спам?

Используйте выделенный домен для отправки, настройте DMARC запись, следите за репутацией IP через вебхуки. Регулярно очищайте список неактивных пользователей. Resend автоматически управляет репутацией, но базовая гигиена списка важна.

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

Resend отправляет webhooks при изменении статуса письма. Ниже — полный пример обработчика на Node.js с Express:

app.post('/api/webhooks/resend', express.raw({ type: 'application/json' }), async (req, res) => { const signature = req.headers['resend-signature']; 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(); }); 

Частые проблемы и их решение

• Ошибка авторизации: неверный API-ключ. Проверьте переменную окружения RESEND_API_KEY.
• Письма не доходят: неправильная настройка домена или попадание в спам. Используйте вебхуки для отслеживания и настройте SPF/DKIM строго по инструкции.
• Превышение лимита: бесплатный тариф ограничен 3000 писем в месяц. При необходимости перейдите на платный или используйте батчевую отправку для оптимизации.

Что входит в работу по интеграции Resend

Сроки и стоимость

Базовая интеграция Resend + 2-3 шаблона React Email — 1-2 дня. Расширенная версия с доменом, webhooks и логированием — 3-4 дня. Стоимость рассчитывается индивидуально и зависит от сложности проекта. Оставьте заявку — мы подберём оптимальное решение. Получите консультацию по интеграции Resend: наши инженеры с опытом более 5 лет помогут настроить надёжную отправку писем. Мы гарантируем высокую доставляемость и поддержку после запуска.