Envía emails
transaccionales
con Resend

Elige una plantilla, introduce tu email y recibe el mensaje en tu bandeja. React Email + Next.js + Resend SDK.

01 — Plantilla

02 — Código del componente

WelcomeEmail.tsx
1"token-keyword">import {
2  Body, Container, Head, Heading,
3  Html, Preview, Section, Text,
4} "token-keyword">from "@react-email/components";
5
6"token-keyword">interface WelcomeEmailProps {
7  username: string;
8}
9
10"token-keyword">export "token-keyword">default "token-keyword">function WelcomeEmail({
11  username = "usuario",
12}: WelcomeEmailProps) {
13  "token-keyword">return (
14    <Html>
15      <Head />
16      <Preview>¡Bienvenido a bordo, {username}!</Preview>
17      <Body style={main}>
18        <Container style={container}>
19          <Heading style={heading}>
20            ¡Bienvenido, {username}!
21          </Heading>
22          <Text style={text}>
23            Nos alegra que estés aquí. Tu cuenta ha sido
24            creada correctamente y ya puedes empezar a
25            usar la plataforma.
26          </Text>
27          <Section style={divider} />
28          <Text style={footer}>
29            Si no creaste esta cuenta, puedes ignorar
30            este mensaje.
31          </Text>
32        </Container>
33      </Body>
34    </Html>
35  );
36}

03 — Enviar email de prueba

¿Necesitas ayuda integrando esto en tu proyecto?

Sesión de consultoría 1:1 para resolver tu caso concreto.90€/sesión

Reservar sesión

Cada semana, herramientas como esta en tu bandeja.

Suscribirme a la newsletter

Esta demo está construida con Next.js + Resend. El código es público.

Ver en GitHub

Stack técnico

Next.js 15App Router con Server Components y API routes integradas — sin backend separado.
Resend SDKAPI de email transaccional con SDK TypeScript de primera clase y free tier generoso.
React EmailPlantillas de email como componentes React — mismo lenguaje que el resto de la app.
Tailwind CSSUtility-first CSS que mantiene los estilos colocalizados con el markup.
TypeScriptTipado estático que previene errores en tiempo de desarrollo, no en producción.