Plantillas de correo electrónico de React: cree hermosos correos electrónicos transaccionales
Los correos electrónicos transaccionales tienen una tasa de apertura del 45 % (casi cinco veces el promedio de los correos electrónicos de marketing), sin embargo, la mayoría de las empresas envían correos electrónicos HTML con un formato deficiente que dañan la percepción de la marca. React Email lleva el modelo de desarrollo basado en componentes al diseño de correos electrónicos, lo que permite a los desarrolladores crear plantillas hermosas y responsivas con patrones familiares de React.
Conclusiones clave
- Los componentes de React Email se compilan en HTML compatible con varios clientes: Gmail, Outlook, Apple Mail
- La arquitectura basada en componentes permite encabezados, pies de página y patrones de diseño reutilizables
- El servidor de vista previa local con recarga en caliente acelera el desarrollo de plantillas
- Exporta funciones de renderizado (no componentes sin formato) para una integración perfecta con NestJS.
¿Por qué reaccionar por correo electrónico?
El correo electrónico HTML es notoriamente difícil. Diferentes clientes procesan HTML de manera diferente: Outlook usa Word como motor de procesamiento, Gmail elimina las etiquetas de estilo y los clientes móviles varían en el manejo de la ventana gráfica.
React Email resume esto con componentes prediseñados: Contenedor (ancho de respuesta), Sección (bloques basados en tablas), Fila/Columna (sistema de cuadrícula), Texto, Encabezado, Botón (funciona en Outlook), Imagen, Enlace, Hora y Vista previa (texto oculto en la bandeja de entrada).
Configuración del proyecto
Instale @react-email/components y reaccionar-email. Organice las plantillas en un directorio de paquetes/plantillas de correo electrónico con plantillas/, componentes/ y un archivo render.ts que exporta funciones de renderizado.
Plantillas de construcción
Componentes de diseño compartidos
Cree componentes EmailHeader y EmailFooter reutilizables con su marca. Estos garantizan la coherencia en todos los correos electrónicos transaccionales.
Estructura de plantilla
Cada plantilla de correo electrónico es un componente de React que recibe accesorios escritos:
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>
);
}
Representación para la integración de NestJS
El patrón crítico: exportar funciones de renderizado, no componentes sin formato. NestJS se ejecuta sin compilación JSX, por lo que la importación de componentes de React provoca errores directamente.
Cree un archivo render.ts que importe plantillas y exporte funciones así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));
}
En NestJS, llame a la función de renderizado para obtener HTML y luego envíelo a través de su transportador de correo electrónico.
Flujo de trabajo de desarrollo
Vista previa local
Ejecute npx react-email dev para obtener una vista previa basada en navegador con recarga en caliente. Los cambios aparecen instantáneamente, lo que agiliza la iteración.
Pruebas entre clientes
Pruebe entre clientes utilizando Litmus o Email on Acid. En prueba mínima: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail y Outlook.com.
Mejores prácticas de estilo
- Solo estilos en línea: React envía estilos en línea automáticamente para compatibilidad con el cliente
- Fuentes del sistema: utilice Arial, Georgia, Verdana. Las fuentes personalizadas tienen soporte limitado.
- Ancho máximo de 600 px: ancho de correo electrónico estándar para computadoras de escritorio y dispositivos móviles
- Diseño basado en tablas: los componentes de React Email se representan como tablas para compatibilidad con Outlook
- Modo oscuro: incluye metaetiquetas para la compatibilidad con el modo oscuro de Apple Mail y Outlook
Plantillas de correo electrónico comunes
Confirmación de pedido
Incluya el número de pedido, la lista de artículos con precios, la dirección de envío, la entrega estimada y el enlace de seguimiento cuando esté disponible. Utilice un diseño de tabla para la lista de elementos.
Restablecer contraseña
Manténgalo mínimo: breve explicación, botón de reinicio destacado con enlace por tiempo limitado, aviso de seguridad sobre no compartir el enlace y contacto de soporte.
Correo electrónico de factura
Adjunte la factura en PDF e incluya un resumen en el cuerpo del correo electrónico: número de factura, fecha, fecha de vencimiento, monto total y un botón para ver/pagar en línea.
Notificación de envío
Incluya el número de pedido, el nombre del transportista, el número de seguimiento con un enlace en el que se puede hacer clic, la fecha de entrega estimada y los artículos que se enviarán.
Preguntas frecuentes
P: ¿Por qué no utilizar un creador de correo electrónico del tipo arrastrar y soltar?
Los creadores de arrastrar y soltar funcionan para correos electrónicos de marketing, pero carecen de capacidades de contenido dinámico para correos electrónicos transaccionales. Las confirmaciones de pedidos y las facturas requieren plantillas basadas en datos que el código maneja mejor.
P: ¿React Email funciona con algún servicio de envío?
Sí. Genera cadenas HTML estándar compatibles con Nodemailer, SendGrid, Postmark, AWS SES, Resend o cualquier servidor SMTP.
P: ¿Cómo manejamos la localización del correo electrónico?
Pase la configuración regional y las cadenas traducidas como accesorios de plantilla. La función de renderizado recibe todo el texto como parámetros, por lo que su sistema i18n maneja las traducciones antes de renderizar.
P: ¿Podemos incluir imágenes o gráficos dinámicos?
Utilice imágenes generadas por el servidor alojadas en URL. Bibliotecas como QuickChart representan gráficos como imágenes. Evite imágenes incrustadas: utilice URL alojadas para mayor compatibilidad.
¿Qué sigue?
React Email transforma el desarrollo de correo electrónico transaccional de frustrantes ejercicios de diseño de tablas a flujos de trabajo modernos basados en componentes.
Comuníquese con ECOSIRE para desarrollar plantillas de correo electrónico, o explore nuestros servicios de implementación de Odoo para flujos de trabajo de correo electrónico integrados.
Publicado por ECOSIRE: ayuda a las empresas a escalar con soluciones de software empresarial.
Escrito por
ECOSIRE Research and Development Team
Construyendo productos digitales de nivel empresarial en ECOSIRE. Compartiendo perspectivas sobre integraciones Odoo, automatización de eCommerce y soluciones empresariales impulsadas por IA.
Artículos relacionados
Creación de API con Drizzle ORM y NestJS: guía completa
Cree API con seguridad de tipos con Drizzle ORM y NestJS. Aprenda la definición de esquemas, migraciones, creación de consultas, relaciones, transacciones y patrones de prueba para aplicaciones de producción.
Internacionalización de Next.js: Guía completa de i18n con next-intl
Implemente la internacionalización en Next.js con next-intl. Guía completa que cubre enrutamiento, traducciones, componentes de servidor/cliente, soporte RTL, SEO e implementación.