Stack

Resend + React Email: emails transaccionales en SaaS Next.js

Cómo encajar Resend + React Email en un SaaS Next.js. Setup, helpers, deliverability y errores comunes.

Israel Palma Sebastià

17 de abril de 2026

3 min de lectura

El email transaccional sigue siendo el canal más infravalorado en SaaS. La gente abre el "tu cuenta está lista" más que cualquier post de LinkedIn. En 2026, Resend + React Email es el combo que mejor balancea DX y deliverability sin pagar el sobreprecio histórico de SendGrid o Mailgun.

Esta guía explica cómo encajar Resend + React Email en un SaaS Next.js y qué patrones funcionan.

Qué hace cada pieza

Resend: API moderna para enviar emails. SPF/DKIM/DMARC fácil, sin DKIM keys que copiar a mano. Pricing simple (3.000 emails/mes gratis, $20/mes por 50.000).
React Email: librería para escribir emails como componentes React. Previews en local, compatibilidad cross-client (Gmail, Outlook, Apple Mail).

Combinas las dos: escribes emails como componentes, los envías con la API.

Setup

bun add resend @react-email/components

Variables:

RESEND_API_KEY=re_...
EMAIL_FROM=hello@tudominio.com

Cliente:

// src/lib/email/client.ts
import { Resend } from 'resend';

export const resend = new Resend(process.env.RESEND_API_KEY);

Tu primer email como componente

// src/lib/email/templates/welcome.tsx
import { Body, Button, Container, Heading, Html, Text } from '@react-email/components';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Body style={{ fontFamily: 'system-ui' }}>
        <Container>
          <Heading>Bienvenido, {name}</Heading>
          <Text>Gracias por unirte. Aquí va tu primer paso:</Text>
          <Button href="https://tudominio.com/onboarding">Empezar</Button>
        </Container>
      </Body>
    </Html>
  );
}

Cero CSS, cero <table> enredadas. Los componentes generan HTML compatible con clientes de email modernos y antiguos.

Enviar el email

import { resend } from '@/lib/email/client';
import { WelcomeEmail } from '@/lib/email/templates/welcome';

await resend.emails.send({
  from: process.env.EMAIL_FROM!,
  to: user.email,
  subject: 'Bienvenido a CREA.MBA',
  react: <WelcomeEmail name={user.name} />,
});

react: <Componente />. Sin renderear HTML manualmente, sin pasar por servidor de plantillas.

Preview en local

React Email trae un preview server:

bunx email dev

Abres localhost:3000, ves todos tus emails como si fueras el destinatario. Súper útil para iterar sin enviar 50 emails de prueba a tu Gmail.

Patrón helper centralizado

Si envías 4-5 tipos de email, sácalo a helpers:

// src/lib/email/index.ts
import { resend } from './client';
import { WelcomeEmail } from './templates/welcome';
import { ResetPasswordEmail } from './templates/reset-password';

export async function sendWelcomeEmail(to: string, name: string) {
  return resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to,
    subject: 'Bienvenido',
    react: <WelcomeEmail name={name} />,
  });
}

export async function sendResetPasswordEmail(to: string, link: string) {
  return resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to,
    subject: 'Recupera tu contraseña',
    react: <ResetPasswordEmail link={link} />,
  });
}

Los uses desde server actions, webhooks, cron, etc. Sin repetir el from ni el client.

Domain authentication

Esto NO te lo puedes saltar. Si envías sin SPF/DKIM/DMARC, Gmail te manda a spam.

En Resend Dashboard → Domains → añade tu dominio → Resend genera 3 registros DNS. Los pegas en Cloudflare/Route53/donde tengas el DNS. Resend valida y te da el visto bueno.

Sin esto: rate limit bajo, spam alto. Con esto: deliverability normal.

Errores comunes

1. from con dominio no verificado: Resend te lo bloquea. Verifica el dominio antes de enviar.

2. Asuntos genéricos: "Notificación de tu cuenta" baja open rate. Sé específico: "Tu pago de 49€ se procesó correctamente".

3. Email solo HTML sin texto plano: algunos clientes lo marcan como spam. Resend genera la versión texto automáticamente desde el componente, no la inhabilites.

4. Enviar en bloque desde un endpoint user-facing: si recorres 1000 usuarios y mandas emails inline, el endpoint timeoutea. Mete cola (Inngest, BullMQ, o un script aparte).

Cuándo Resend NO es suficiente

Vas a enviar millones de emails/mes (Postmark, SES escalan mejor en pricing puro)
Necesitas IP dedicada para deliverability extrema
Quieres analytics avanzados (heatmaps de clicks por user) — usa SendGrid/Mailchimp para marketing, mantén Resend para transaccional

Conclusión

Resend + React Email son 30 minutos de setup y te dejan con email transaccional moderno, en TS, con preview local y deliverability decente.

Para SaaS indie hasta ~50k usuarios, no hay razón para pagar más ni configurar más. Es la pieza del stack que se monta y se olvida — que es justo lo que quieres del email.

¿Te gustó este artículo?

Suscríbete para más tutoriales y tips sobre crear productos con IA

Stack

Resend + React Email: emails transaccionales en SaaS Next.js

Cómo encajar Resend + React Email en un SaaS Next.js. Setup, helpers, deliverability y errores comunes.

Israel Palma Sebastià

17 de abril de 2026

3 min de lectura

Esta guía explica cómo encajar Resend + React Email en un SaaS Next.js y qué patrones funcionan.

Qué hace cada pieza

Resend: API moderna para enviar emails. SPF/DKIM/DMARC fácil, sin DKIM keys que copiar a mano. Pricing simple (3.000 emails/mes gratis, $20/mes por 50.000).
React Email: librería para escribir emails como componentes React. Previews en local, compatibilidad cross-client (Gmail, Outlook, Apple Mail).

Combinas las dos: escribes emails como componentes, los envías con la API.

Setup

bun add resend @react-email/components

Variables:

RESEND_API_KEY=re_...
EMAIL_FROM=hello@tudominio.com

Cliente:

// src/lib/email/client.ts
import { Resend } from 'resend';

export const resend = new Resend(process.env.RESEND_API_KEY);

Tu primer email como componente

// src/lib/email/templates/welcome.tsx
import { Body, Button, Container, Heading, Html, Text } from '@react-email/components';

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Body style={{ fontFamily: 'system-ui' }}>
        <Container>
          <Heading>Bienvenido, {name}</Heading>
          <Text>Gracias por unirte. Aquí va tu primer paso:</Text>
          <Button href="https://tudominio.com/onboarding">Empezar</Button>
        </Container>
      </Body>
    </Html>
  );
}

Cero CSS, cero <table> enredadas. Los componentes generan HTML compatible con clientes de email modernos y antiguos.

Enviar el email

import { resend } from '@/lib/email/client';
import { WelcomeEmail } from '@/lib/email/templates/welcome';

await resend.emails.send({
  from: process.env.EMAIL_FROM!,
  to: user.email,
  subject: 'Bienvenido a CREA.MBA',
  react: <WelcomeEmail name={user.name} />,
});

react: <Componente />. Sin renderear HTML manualmente, sin pasar por servidor de plantillas.

Preview en local

React Email trae un preview server:

bunx email dev

Abres localhost:3000, ves todos tus emails como si fueras el destinatario. Súper útil para iterar sin enviar 50 emails de prueba a tu Gmail.

Patrón helper centralizado

Si envías 4-5 tipos de email, sácalo a helpers:

// src/lib/email/index.ts
import { resend } from './client';
import { WelcomeEmail } from './templates/welcome';
import { ResetPasswordEmail } from './templates/reset-password';

export async function sendWelcomeEmail(to: string, name: string) {
  return resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to,
    subject: 'Bienvenido',
    react: <WelcomeEmail name={name} />,
  });
}

export async function sendResetPasswordEmail(to: string, link: string) {
  return resend.emails.send({
    from: process.env.EMAIL_FROM!,
    to,
    subject: 'Recupera tu contraseña',
    react: <ResetPasswordEmail link={link} />,
  });
}

Los uses desde server actions, webhooks, cron, etc. Sin repetir el from ni el client.

Domain authentication

Esto NO te lo puedes saltar. Si envías sin SPF/DKIM/DMARC, Gmail te manda a spam.

En Resend Dashboard → Domains → añade tu dominio → Resend genera 3 registros DNS. Los pegas en Cloudflare/Route53/donde tengas el DNS. Resend valida y te da el visto bueno.

Sin esto: rate limit bajo, spam alto. Con esto: deliverability normal.

Errores comunes

1. from con dominio no verificado: Resend te lo bloquea. Verifica el dominio antes de enviar.

2. Asuntos genéricos: "Notificación de tu cuenta" baja open rate. Sé específico: "Tu pago de 49€ se procesó correctamente".

3. Email solo HTML sin texto plano: algunos clientes lo marcan como spam. Resend genera la versión texto automáticamente desde el componente, no la inhabilites.

4. Enviar en bloque desde un endpoint user-facing: si recorres 1000 usuarios y mandas emails inline, el endpoint timeoutea. Mete cola (Inngest, BullMQ, o un script aparte).

Cuándo Resend NO es suficiente

Vas a enviar millones de emails/mes (Postmark, SES escalan mejor en pricing puro)
Necesitas IP dedicada para deliverability extrema
Quieres analytics avanzados (heatmaps de clicks por user) — usa SendGrid/Mailchimp para marketing, mantén Resend para transaccional

Conclusión

Resend + React Email son 30 minutos de setup y te dejan con email transaccional moderno, en TS, con preview local y deliverability decente.

Para SaaS indie hasta ~50k usuarios, no hay razón para pagar más ni configurar más. Es la pieza del stack que se monta y se olvida — que es justo lo que quieres del email.

¿Te gustó este artículo?

Suscríbete para más tutoriales y tips sobre crear productos con IA

Qué hace cada pieza

Setup

Tu primer email como componente

Enviar el email

Preview en local

Patrón helper centralizado

Domain authentication

Errores comunes

Cuándo Resend NO es suficiente

Conclusión

¿Te gustó este artículo?

Qué hace cada pieza

Setup

Tu primer email como componente

Enviar el email

Preview en local

Patrón helper centralizado

Domain authentication

Errores comunes

Cuándo Resend NO es suficiente

Conclusión

¿Te gustó este artículo?

Migrar de MinIO archivado a Garage self-host con Coolify