Enviar correos transaccionales con Resend en React y NestJS

Cómo usar Resend en React y NestJS

Tiempo estimado de lectura: 4 min

• Mantén consistencia visual entre web y correo usando plantillas React Email.
• Protege claves renderizando en el servidor (NestJS) y guardando API keys en variables de entorno.
• Escala correctamente con colas (BullMQ/Redis) para evitar bloquear peticiones.

Cómo usar Resend en React y NestJS para enviar correos transaccionales sin sangrar tiempo en HTML quebrado ni exponer claves. Esta guía práctica muestra plantillas en React, render en servidor (NestJS) y entrega con Resend.

Resumen rápido (lectores con prisa)

Qué es: patrón para generar y enviar emails transaccionales usando plantillas React Email, render en NestJS y entrega vía Resend.

Cuándo usarlo: cuando quieres consistencia visual entre web y email y no exponer claves en frontend.

Por qué importa: reduce deuda técnica, mejora DX y entregabilidad al separar render y envío.

Cómo funciona: escribe plantillas React, renderízalas en servidor con @react-email/render y envía con la API de Resend; procesa con colas para escalar.

Cómo usar Resend en React y NestJS: flujo y por qué importa

No es solo “mandar un email”. Es:

• mantener consistencia visual entre web y correo,
• no exponer claves,
• evitar render duplicado,
• y escalar sin convertir cada registro en un bloqueo HTTP.

La solución: escribir plantillas con React Email, renderizarlas en NestJS usando @react-email/render y llamar a Resend para la entrega. Docs oficiales: Resend, React Email, NestJS.

1) Plantilla en React (React Email)

Instala dependencias en tu monorepo o carpeta compartida:

npm install @react-email/components @react-email/render
npm install -D react @types/react

Ejemplo mínimo: src/emails/WelcomeEmail.tsx

import * as React from 'react';
import { Html, Body, Container, Text, Button } from '@react-email/components';

export function WelcomeEmail({ name, url }: { name: string; url: string }) {
  return (
      
        
          Hola, {name}
          Verifica tu cuenta para empezar a usar la plataforma.
          
            Verificar cuenta
          
        
      
    
  );
}

Ventaja: el componente es testable, reutilizable y legible. React Email genera HTML compatible con clientes antiguos.

2) Render y envío en NestJS

Instala el SDK de Resend:

npm install resend

email.service.ts (esqueleto)

import { Injectable, Logger } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import { Resend } from 'resend';
import { render } from '@react-email/render';
import { WelcomeEmail } from '../emails/WelcomeEmail';

@Injectable()
export class EmailService {
  private resend: Resend;
  private logger = new Logger(EmailService.name);

  constructor(private config: ConfigService) {
    this.resend = new Resend(this.config.get('RESEND_API_KEY'));
  }

  async sendWelcome(to: string, name: string, verificationUrl: string) {
    const html = render(WelcomeEmail({ name, url: verificationUrl }));
    const res = await this.resend.emails.send({
      from: 'TuApp <noreply@tu-dominio.com>',
      to: [to],
      subject: `Bienvenido ${name}`,
      html,
    });
    this.logger.log(`Enviado: ${res.data.id}`);
    return res;
  }
}

Puntos clave:

• La API key vive en variables de entorno. Nunca en frontend.
• render() convierte JSX a HTML listo para enviar.
• Usa ConfigService para separar entornos.

Referencia de la API de envío: Referencia de la API de envío

3) No bloquees peticiones: usa colas

Enviar emails sin cola = romper UX y escalar mal. Usa BullMQ/Redis:

• BullMQ docs
• Patrón: controlador crea job -> responde 202 -> worker procesa job (llama a EmailService)

Beneficios:

• reintentos automáticos,
• backpressure controlada,
• workers horizontales.

4) Producción: dominios, entregabilidad y observabilidad

Configura DKIM, SPF y DMARC. Resend te da valores concretos durante la verificación. Enlaces útiles:

• Verificación de dominio Resend

Ejemplo mínimo SPF/DKIM

• TXT @ v=spf1 include:resend.com ~all
• Registros DKIM proporcionados por Resend
• TXT _dmarc “v=DMARC1; p=quarantine; rua=mailto:postmaster@tu-dominio.com”

Añade headers o tags en los envíos para trazar campañas o templates. Resend Dashboard permite ver bounces, opens y eventos.

5) Buenas prácticas y decisiones técnicas

• Reutiliza componentes visuales entre web y email cuando tenga sentido. No todo componente de UI es apto para email: usa @react-email/components para compatibilidad.
• Mantén plantillas en una carpeta compartida o paquete npm interno (monorepo).
• En entornos dev, whitelistea destinatarios para no spamear usuarios reales.
• Telemetría: registra message-id, template tag y userId en logs para debug.
• Si no usas React en tu stack, no añadas React Email solo por moda. El coste de la dependencia debe justificarse.

Conclusión rápida

Usar Resend en React y NestJS no es una moda: es un patrón que reduce deuda, mejora DX y facilita la entregabilidad. Resumen práctico:

1. escribe plantillas con React Email;
2. renderiza en NestJS con @react-email/render;
3. envía con Resend y procesa con colas (BullMQ) en producción;
4. verifica dominio y monitoriza.

Si quieres, te dejo un ejemplo con BullMQ integrado y un pipeline de observabilidad (logs + Sentry + Resend tags) listo para copiar y pegar. Esto no acaba aquí.

FAQ

• ¿Por qué renderizar plantillas en el servidor?
• ¿Dónde debo guardar la API key de Resend?
• ¿Por qué usar BullMQ/Redis para enviar emails?
• ¿React Email funciona con clientes antiguos?
• ¿Qué registros DNS debo configurar para producción?
• ¿Resend provee herramientas de monitorización?