Jak wysyłać e-maile za pomocą React Email

Klienty poczty odrzucają nowoczesne układy CSS flexbox i grid, więc programiści muszą ręcznie pisać zagnieżdżone tabele HTML i style inline. React Email kompiluje komponenty JSX do znaczników opartych na tabelach, które wyświetlają się spójnie w Gmailu, Outlooku i Apple Mail.

Jak zbudować szablon e-maila?

Zainstaluj pakiety:

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

Komponenty odwzorowują się na bezpieczny dla e-maili HTML i obsługują za Ciebie style inline oraz układy tabelaryczne. Prosty szablon paragonu, przyjmujący propsy, aby można go było wielokrotnie używać:

// 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>
  );
}

Ponieważ to po prostu React, komponujesz, iterujesz i przekazujesz propsy tak samo jak w każdym innym komponencie, a potem podglądasz wynik lokalnie, zanim cokolwiek zostanie wysłane.

Jak wyrenderować komponent do HTML?

render() przyjmuje element i zwraca ciąg HTML. Może też wygenerować wersję tekstową, którą powinieneś dołączyć jako alternatywę tekstową:

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,
});

W tym momencie masz ciąg HTML. Zadanie React Email jest zakończone. Nic nie zostało jeszcze wysłane; do tego potrzebujesz dostawcy.

Wyślij za pomocą Bird

Przekaż wyrenderowany HTML bezpośrednio do Bird email API. Wynik komponentu trafia do pola 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();

Nadawca onboarding@messagebird.dev i adres sandboxowy delivered@messagebird.dev pozwalają w jednym przebiegu sprawdzić zarówno wyrenderowany szablon, jak i wysyłkę. Ten sam wynik render() działa w funkcjach Vercel lub przez SMTP z Nodemailerem.

FAQ

Czy React Email wysyła e-mail?

Nie. Buduje szablon i renderuje go do HTML oraz zwykłego tekstu. Dostarczanie to osobny krok obsługiwany przez dostawcę, takiego jak serwer SMTP lub API e-mail.

Dlaczego warto używać React Email zamiast pisać HTML ręcznie?

HTML e-maili musi działać w klientach obsługujących bardzo różne podzbiory CSS, co zwykle oznacza zagnieżdżone tabele i style inline. Komponenty React Email generują te znaczniki za Ciebie, więc piszesz komponenty i dostajesz wynik bezpieczny dla klientów e-mail.

Czy mogę użyć jednego szablonu z różnymi danymi?

Tak. Szablony to komponenty React, więc przyjmują propsy. Wyrenderuj ten sam komponent z innymi wartościami dla każdego odbiorcy, a potem wyślij każdy wynik.

React Email i API do wysyłki dzielą pracę w przejrzysty sposób: jedno kształtuje wiadomość, drugie ją dostarcza. Aby korzystać z zarządzanych szablonów po stronie wysyłki, zobacz szablony e-mail Bird.