Верстка писем — Все, что сложнее plain text / Хабр

Верстаем письмо на React, чтобы оно корректно отображалось во всех почтовых клиентах

Чтобы свёрстанные письма хорошо выглядели на десктопе и мобильных, нужно знать, как почтовые клиенты поддерживают возможности CSS и HTML. И на практике это не всегда просто. Например, Gmail отбрасывает атрибут style целиком, если встречает в нём цвет, заданный как rgb. В итоге даже в 2025 году вёрстка писем нередко сводится к написанию таблиц и атрибутов наподобие align, valign, bgcolor и т.д.

Вдобавок, после отправки письмо нельзя поправить, как страницу на сайте, и это тоже добавляет сложности.

Наша команда решила оценить для создания писем библиотеку React Email. Она предоставляет компоненты, которые генерируют HTML и CSS для корректного отображения во всех почтовых клиентах. Письмо можно посмотреть в браузере и отправить на почту. Под капотом всё равно останутся таблицы, но писать их руками не придётся.

На примере отправки через сервис Yandex Postbox покажем, как это работает.

Начало работы. Установим библиотеку @react‑email/components и клиент для работы с почтовым сервисом AWS SESv2 — Postbox поддерживает эту версию клиента.

npm install @aws-sdk/client-sesv2 @react-email/components

Создадим компонент, который будет генерировать письмо:

email.tsx
import * as React from 'react';
import { Button, Html } from '@react-email/components';

export function Email(props) {
   const { url } = props;

   return (
       <Html lang="en">
           <Button href={url}>Click me</Button>
       </Html>
   );
}

Больше компонентов — в документации.

Создание аккаунта в облаке

Создадим сервисный аккаунт в том же каталоге, в котором находится адрес. Если создать сервисный аккаунт и адрес в разных каталогах, при попытке отправить письмо возникнет ошибка.
Назначим сервисному аккаунту роль postbox.sender.
Для отправки письма с помощью SDK создадим статический ключ доступа. Важно надёжно сохранить идентификатор и секретный ключ. После того как вы закроете окно, параметры секретного ключа станут недоступны.

Отправка письма. Ключи доступа можно передать в конструктор SESv2Client явно, как показано ниже, указать их в переменных окружения или использовать конфигурацию AWS CLI.

import { render } from '@react-email/components';
import type { SendEmailCommandInput } from '@aws-sdk/client-sesv2';
import { SendEmailCommand, SESv2Client } from '@aws-sdk/client-sesv2';
import { Email } from './email';
import React from 'react'


const sesClient = new SESv2Client({
   region: 'ru-central1',
   endpoint: 'https://postbox.cloud.yandex.net',
});

const emailHtml = await render(<Email url="https://example.com"/>);
const emailText = await render(<Email url="https://example.com"/>, {
   pretty: true,
   plainText: true,
});

const email: SendEmailCommandInput = {
   Content: {
       Simple: { 
           Body: {
               Html: {
                   Data: emailHtml,
               },
               Text: {
                   Data: emailText,
               },
           },
           Subject: {
               Data: 'Тестовое письмо',
           },
       },
   },
   Destination: {
       ToAddresses: [
           'bob@example.com'
       ],
   },
   FromEmailAddress: 'Alice <alice@example.com>',
}

const command = new SendEmailCommand(email);

const result = await sesClient.send(command);
console.log(result);

Чтобы удобно запускать скрипт, установим tsx loader:

npm install --save-dev tsx

Теперь запустим скрипт, передав в переменные окружения ключи сервисного аккаунта:

AWS_ACCESS_KEY_ID=... AWS_SECRET_ACCESS_KEY=... node --import @nodejs-loaders/tsx index.tsx

В консоли увидим ответ от Postbox. Если письмо отправлено успешно, то в ответе будет MessageId.

{
 '$metadata': {
   httpStatusCode: 200,
   requestId: undefined,
   extendedRequestId: undefined,
   cfId: undefined,
   attempts: 1,
   totalRetryDelay: 0
 },
 MessageId: 'D8BT2CX3IDK2.2HZQ4CE0E8CRL@ingress1-sas'
}

Если захотите отправить несколько писем в цикле, рекомендуем добавить в код задержку между отправками, чтобы не превысить квоту.

Верстка писем *