React Email adalah library templating, bukan pengirim. Anda menulis email sebagai komponen React menggunakan @react-email/components, memanggil render() untuk mengubahnya menjadi string HTML, lalu menyerahkan HTML tersebut ke provider email mana pun untuk dikirim. Pembagian ini penting: React Email menangani markup (dan keanehan lintas klien yang membuat HTML email merepotkan), sementara provider terpisah melakukan pengiriman. Berikut alur lengkapnya.
Bagaimana cara membuat template email?
Instal paket-paketnya:
npm install @react-email/components @react-email/renderKomponen-komponen ini dipetakan ke HTML yang aman untuk email dan menangani inline style serta tata letak tabel untuk Anda. Contoh template tanda terima sederhana, menerima props agar bisa digunakan ulang:
// emails/Receipt.tsx
import { Html, Head, Body, Container, Heading, Text } from "@react-email/components";
type ReceiptProps = {
name: string;
total: string;
};
export function Receipt({ name, total }: ReceiptProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "sans-serif" }}>
<Container>
<Heading>Thanks, {name}</Heading>
<Text>Your order total was {total}.</Text>
</Container>
</Body>
</Html>
);
}Karena ini hanya React, Anda bisa menyusun, melakukan loop, dan meneruskan props seperti pada komponen biasa, lalu melihat pratinjaunya secara lokal sebelum dikirim.
Bagaimana cara merender komponen menjadi HTML?
render() menerima elemen dan mengembalikan string HTML. Fungsi ini juga bisa menghasilkan versi teks biasa, yang sebaiknya Anda sertakan sebagai alternatif teks:
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const html = await render(<Receipt name="Alex" total="$42.00" />);
const text = await render(<Receipt name="Alex" total="$42.00" />, {
plainText: true,
});Pada titik ini Anda memiliki string HTML. Tugas React Email selesai. Belum ada yang terkirim; Anda memerlukan provider untuk itu.
Kirim dengan Bird
Masukkan HTML yang sudah dirender langsung ke Bird email API. Output komponen menjadi field html:
import { BirdClient } from "@messagebird/sdk";
import { render } from "@react-email/render";
import { Receipt } from "./emails/Receipt";
const bird = new BirdClient({ apiKey: process.env.BIRD_API_KEY! });
const html = await render(<Receipt name="Alex" total="$42.00" />);
const { data, error } = await bird.email.send({
from: "you@yourdomain.com",
to: ["delivered@bird.dev"],
subject: "Your receipt",
html,
}).safe();Alamat sandbox delivered@bird.dev selalu menerima email, sehingga Anda bisa memverifikasi template dan pengiriman sekaligus dalam satu kali jalan. Pola ini cocok langsung dimasukkan ke serverless function, yang dibahas di cara mengirim email di Vercel. Jika Anda lebih memilih mengirim melalui SMTP, string html yang sama bisa digunakan dengan Nodemailer.
FAQ
Apakah React Email mengirim email?
Tidak. React Email membangun template dan merendernya menjadi HTML dan teks biasa. Pengiriman adalah langkah terpisah yang ditangani oleh provider seperti server SMTP atau API email.
Mengapa menggunakan React Email alih-alih menulis HTML secara manual?
HTML email harus berfungsi di berbagai klien yang mendukung subset CSS yang sangat berbeda, yang biasanya berarti tabel bersarang dan inline style. Komponen React Email menghasilkan markup tersebut untuk Anda, sehingga Anda cukup menulis komponen dan mendapatkan output yang aman untuk email.
Bisakah saya menggunakan ulang satu template dengan data yang berbeda?
Ya. Template adalah komponen React, jadi menerima props. Render komponen yang sama dengan nilai berbeda untuk setiap penerima, lalu kirim setiap hasilnya.
React Email dan API pengiriman membagi tugas dengan rapi: satu membentuk pesan, yang lain mengirimkannya. Untuk templating terkelola di sisi pengiriman, lihat template email Bird.