Modelos de e-mail React: crie lindos e-mails transacionais
E-mails transacionais têm uma taxa de abertura de 45% – quase 5x a média de e-mails de marketing – mas a maioria das empresas envia e-mails HTML mal formatados que prejudicam a percepção da marca. O React Email traz o modelo de desenvolvimento baseado em componentes para o design de e-mail, permitindo que os desenvolvedores criem modelos bonitos e responsivos com padrões React familiares.
Principais conclusões
- Os componentes do React Email são compilados em HTML compatível com vários clientes - Gmail, Outlook, Apple Mail
- A arquitetura baseada em componentes permite cabeçalhos, rodapés e padrões de layout reutilizáveis
- Servidor de visualização local com recarga dinâmica acelera o desenvolvimento de modelos
- Exporte funções de renderização (não componentes brutos) para integração perfeita com NestJS
Por que reagir ao e-mail
HTML de e-mail é notoriamente difícil. Clientes diferentes renderizam HTML de maneira diferente – o Outlook usa o Word como mecanismo de renderização, o Gmail remove tags de estilo e os clientes móveis variam no manuseio da janela de visualização.
O React Email abstrai isso com componentes pré-construídos: Container (largura responsiva), Seção (blocos baseados em tabela), Linha/Coluna (sistema de grade), Texto, Título, Botão (funciona no Outlook), Imagem, Link, Hr e Visualização (texto oculto da caixa de entrada).
Configuração do projeto
Instale @react-email/components e react-email. Organize os modelos em um diretório packages/email-templates com templates/, componentes/ e um arquivo render.ts que exporta funções de renderização.
Modelos de construção
Componentes de layout compartilhados
Crie componentes EmailHeader e EmailFooter reutilizáveis com sua marca. Isso garante consistência em todos os emails transacionais.
Estrutura do modelo
Cada modelo de email é um componente React que recebe adereços digitados:
import {
Html, Head, Body, Container, Section,
Text, Button, Hr,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto" }}>
<Text>Hi {userName},</Text>
<Text>Your account is ready.</Text>
<Button
href={loginUrl}
style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
>
Sign In
</Button>
</Container>
</Body>
</Html>
);
}
Renderização para integração NestJS
O padrão crítico: exportar funções de renderização, não componentes brutos. NestJS é executado sem compilação JSX, portanto, importar componentes React diretamente causa erros.
Crie um arquivo render.ts que importe modelos e exporte funções assíncronas:
import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";
export async function renderWelcomeEmail(props: {
userName: string;
loginUrl: string;
}) {
return render(WelcomeEmail(props));
}
No NestJS, chame a função render para obter HTML e envie por meio de seu transportador de e-mail.
Fluxo de trabalho de desenvolvimento
Visualização local
Execute npx react-email dev para uma visualização baseada em navegador com recarga dinâmica. As alterações aparecem instantaneamente, tornando a iteração mais rápida.
Teste entre clientes
Teste em clientes usando Litmus ou Email on Acid. No teste mínimo: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail e Outlook.com.
Práticas recomendadas de estilo
- Somente estilos inline: React Email inline estilos automaticamente para compatibilidade do cliente
- Fontes do sistema: Use Arial, Georgia, Verdana. Fontes personalizadas têm suporte limitado.
- Largura máxima de 600 px: largura padrão de e-mail para computadores e dispositivos móveis
- Layout baseado em tabela: os componentes do React Email são renderizados como tabelas para compatibilidade com o Outlook
- Modo escuro: inclui meta tags para suporte ao modo escuro do Apple Mail e Outlook
Modelos de e-mail comuns
Confirmação do pedido
Inclua o número do pedido, lista de itens com preços, endereço de entrega, entrega estimada e link de rastreamento quando disponível. Use um layout de tabela para a lista de itens.
Redefinição de senha
Mantenha o mínimo: breve explicação, botão de redefinição em destaque com link por tempo limitado, aviso de segurança sobre não compartilhar o link e contato de suporte.
E-mail da fatura
Anexe a fatura em PDF e inclua um resumo no corpo do e-mail: número da fatura, data, data de vencimento, valor total e um botão para visualizar/pagar online.
Notificação de Envio
Inclua o número do pedido, nome da transportadora, número de rastreamento com link clicável, data estimada de entrega e itens sendo enviados.
Perguntas frequentes
P: Por que não usar um criador de e-mail de arrastar e soltar?
Os construtores de arrastar e soltar funcionam para emails de marketing, mas não possuem recursos de conteúdo dinâmico para emails transacionais. As confirmações de pedidos e faturas exigem modelos baseados em dados que o código gerencia melhor.
P: O React Email funciona com algum serviço de envio?
Sim. Ele gera strings HTML padrão compatíveis com Nodemailer, SendGrid, Postmark, AWS SES, Resend ou qualquer servidor SMTP.
P: Como lidamos com a localização de e-mails?
Passe a localidade e as strings traduzidas como acessórios de modelo. A função render recebe todo o texto como parâmetros, portanto as traduções são tratadas pelo seu sistema i18n antes da renderização.
P: Podemos incluir imagens ou gráficos dinâmicos?
Use imagens geradas no servidor hospedadas em URLs. Bibliotecas como QuickChart renderizam gráficos como imagens. Evite imagens incorporadas – use URLs hospedados para compatibilidade.
O que vem a seguir
React Email transforma o desenvolvimento de email transacional de exercícios frustrantes de layout de tabela em fluxos de trabalho modernos baseados em componentes.
Entre em contato com a ECOSIRE para desenvolvimento de modelos de e-mail ou explore nossos serviços de implementação Odoo para fluxos de trabalho de e-mail integrados.
Publicado pela ECOSIRE – ajudando empresas a escalar com soluções de software empresarial.
Escrito por
ECOSIRE Research and Development Team
Construindo produtos digitais de nível empresarial na ECOSIRE. Compartilhando insights sobre integrações Odoo, automação de e-commerce e soluções de negócios com IA.
Artigos Relacionados
Construindo APIs com Drizzle ORM e NestJS: guia completo
Crie APIs de tipo seguro com Drizzle ORM e NestJS. Aprenda definição de esquema, migrações, criação de consultas, relações, transações e padrões de teste para aplicativos de produção.
Internacionalização Next.js: Guia i18n completo com next-intl
Implemente a internacionalização em Next.js com next-intl. Guia completo cobrindo roteamento, traduções, componentes de servidor/cliente, suporte RTL, SEO e implantação.