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
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
```bash
bun add resend @react-email/components
```
Variables:
```
RESEND_API_KEY=re_...
EMAIL_FROM=hello@tudominio.com
```
Cliente:
```ts
// src/lib/email/client.ts
import { Resend } from 'resend';
export const resend = new Resend(process.env.RESEND_API_KEY);
```
## Tu primer email como componente
```tsx
// src/lib/email/templates/welcome.tsx
import { Body, Button, Container, Heading, Html, Text } from '@react-email/components';
export function WelcomeEmail({ name }: { name: string }) {
return (
Bienvenido, {name}Gracias por unirte. Aquí va tu primer paso:
);
}
```
Cero CSS, cero `
` enredadas. Los componentes generan HTML compatible con clientes de email
modernos y antiguos.
## Enviar el email
```ts
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: ,
});
```
`react: `. Sin renderear HTML manualmente, sin pasar por servidor de plantillas.
## Preview en local
React Email trae un preview server:
```bash
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:
```ts
// 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: ,
});
}
export async function sendResetPasswordEmail(to: string, link: string) {
return resend.emails.send({
from: process.env.EMAIL_FROM!,
to,
subject: 'Recupera tu contraseña',
react: ,
});
}
```
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
CREA.MBA