Інтеграція 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 працює з коробки, що прискорює розробку шаблонів у рази. Наш досвід показує: час на інтеграцію скорочується вдвічі порівняно з класичними рішеннями, а дохід від відновлених сповіщень окупає витрати за 1-2 місяці.

Resend вдвічі швидше налаштовується, ніж класичний 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 років допоможуть налаштувати надійне відправлення листів. Ми гарантуємо високу доставку та підтримку після запуску.