Cara mengirim email dengan React Email

Klien email menolak tata letak CSS modern seperti flexbox dan grid, sehingga developer terpaksa menulis tabel HTML bersarang dan inline style secara manual. React Email mengompilasi komponen JSX menjadi markup berbasis tabel yang tampil konsisten di Gmail, Outlook, dan Apple Mail.

Bagaimana cara membuat template email?

Instal paket-paketnya:

npm install @react-email/components @react-email/render

Komponen-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:    "onboarding@messagebird.dev",
  to:      ["delivered@messagebird.dev"],
  subject: "Your receipt",
  html,
}).safe();

Pengirim onboarding@messagebird.dev dan alamat sandbox delivered@messagebird.dev memastikan template yang dirender dan pengirimannya berhasil sekaligus dalam satu kali jalan. Output render() yang sama juga bisa digunakan di dalam Vercel functions atau melalui SMTP 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.