Email Marketing dan Transactional Email dengan Resend + React Email di 2026
Email masih jadi channel konversi tertinggi — ROI rata-rata $36 untuk setiap $1 yang dikeluarkan. Resend dan React Email membuat setup email profesional jadi sangat mudah untuk developer.
Muhamad Putra Aulia Hidayat
Email yang Benar-Benar Masuk Inbox
Problem nomor satu email bisnis: masuk spam. Resend adalah email service baru yang dirancang khusus untuk developer, dengan deliverability tinggi dan developer experience yang luar biasa.
Kenapa Resend?
- Deliverability tinggi — built on top of infrastruktur AWS SES
- SDK modern — TypeScript native, async/await
- React Email — tulis template email seperti React component
- Analytics built-in — open rate, click rate, bounce tracking
- Free tier — 3,000 email/bulan gratis
Setup
npm install resend @react-email/components
Buat Template Email dengan React Email
// emails/WelcomeEmail.tsx
import {
Body, Button, Container, Head, Heading,
Hr, Html, Img, Link, Preview, Section, Text
} from "@react-email/components"
interface WelcomeEmailProps {
name: string
loginUrl: string
}
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
return (
<Html lang="id">
<Head />
<Preview>Selamat datang di Digital Uptime, {name}!</Preview>
<Body style={{ backgroundColor: "#f6f9fc", fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto", padding: "20px" }}>
<Heading style={{ color: "#1a1a1a", fontSize: "24px" }}>
Halo, {name}!
</Heading>
<Text style={{ color: "#444", lineHeight: "1.6" }}>
Terima kasih sudah bergabung dengan Digital Uptime.
</Text>
<Button href={loginUrl} style={{ backgroundColor: "#2563eb", color: "#ffffff", padding: "12px 24px", borderRadius: "6px" }}>
Masuk ke Dashboard
</Button>
</Container>
</Body>
</Html>
)
}
Kirim Email via API Route
// app/api/email/welcome/route.ts
import { Resend } from "resend"
import { WelcomeEmail } from "@/emails/WelcomeEmail"
const resend = new Resend(process.env.RESEND_API_KEY)
export async function POST(req: Request) {
const { name, email } = await req.json()
const { data, error } = await resend.emails.send({
from: "Digital Uptime <hello@digiupti.com>",
to: [email],
subject: `Selamat datang, ${name}!`,
react: WelcomeEmail({ name, loginUrl: "https://digiupti.com/dashboard" }),
})
if (error) return Response.json({ error }, { status: 500 })
return Response.json({ id: data?.id })
}
Setup Domain untuk Deliverability Optimal
DNS Records yang perlu ditambahkan:
- SPF Record (TXT) —
v=spf1 include:amazonses.com ~all - DKIM Record (CNAME) — dari dashboard Resend
- DMARC Record (TXT) —
v=DMARC1; p=quarantine; rua=mailto:dmarc@yourdomain.com
Dengan setup SPF, DKIM, dan DMARC yang benar, email akan masuk inbox, bukan folder spam.
Preview Lokal
npx react-email dev
# Buka http://localhost:3000
# Lihat semua template email dengan live preview
Email marketing yang dilakukan dengan benar bisa jadi sumber revenue terbesar bisnis digital Anda.
Newsletter Digital Uptime
Tips teknologi & bisnis mingguan
Bergabung dengan 2,500+ subscriber yang mendapatkan insight teknologi, tutorial development, dan tips bisnis digital langsung ke inbox mereka setiap minggu.