React Email से ईमेल कैसे भेजें

ईमेल क्लाइंट आधुनिक CSS के flexbox और grid लेआउट स्वीकार नहीं करते, इसलिए डेवलपर्स को नेस्टेड HTML टेबल और इनलाइन स्टाइल हाथ से लिखने पड़ते हैं। React Email JSX कंपोनेंट को टेबल-आधारित मार्कअप में कंपाइल करता है, जो Gmail, Outlook और Apple Mail में एक जैसा रेंडर होता है।

ईमेल टेम्पलेट कैसे बनाएँ?

पैकेज इंस्टॉल करें:

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

ये कंपोनेंट ईमेल-सुरक्षित HTML में बदलते हैं और इनलाइन स्टाइल व टेबल लेआउट आपके लिए संभालते हैं। यह एक सरल रसीद टेम्पलेट है, जो props लेता है ताकि आप इसे दोबारा उपयोग कर सकें:

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

चूँकि यह साधारण React ही है, इसलिए आप किसी भी कंपोनेंट की तरह इसमें कंपोज़ करते हैं, लूप चलाते हैं और props पास करते हैं। भेजने से पहले आप इसका लोकल प्रीव्यू भी देख सकते हैं।

कंपोनेंट को HTML में कैसे रेंडर करें?

render() एलिमेंट लेता है और एक HTML स्ट्रिंग लौटाता है। यह प्लेन-टेक्स्ट संस्करण भी बना सकता है। इसे टेक्स्ट विकल्प के रूप में ज़रूर शामिल करें:

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

अब आपके पास HTML की एक स्ट्रिंग है और React Email का काम पूरा हो गया है। अभी तक कुछ भी भेजा नहीं गया है। भेजने के लिए आपको एक प्रोवाइडर चाहिए।

Bird से भेजें

रेंडर किया गया HTML सीधे Bird ईमेल API में भेजें। कंपोनेंट का आउटपुट 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();

onboarding@messagebird.dev प्रेषक और delivered@messagebird.dev सैंडबॉक्स पते से आप एक ही रन में रेंडर किए गए टेम्पलेट और भेजने, दोनों की पुष्टि कर सकते हैं। वही render() आउटपुट Vercel फ़ंक्शन के अंदर या Nodemailer के साथ SMTP पर भी काम करता है।

अक्सर पूछे जाने वाले प्रश्न

क्या React Email ईमेल भेजता है?

नहीं। यह टेम्पलेट बनाता है और उसे HTML और सादे टेक्स्ट में रेंडर करता है। डिलीवरी एक अलग चरण है, जिसे कोई प्रोवाइडर संभालता है, जैसे कोई SMTP सर्वर या कोई ईमेल API।

हाथ से HTML लिखने के बजाय React Email का उपयोग क्यों करें?

ईमेल HTML को ऐसे क्लाइंट्स में काम करना होता है जो CSS के बहुत अलग-अलग हिस्सों का समर्थन करते हैं, और इसका मतलब आम तौर पर नेस्टेड टेबल और इनलाइन स्टाइल होता है। React Email के कंपोनेंट आपके लिए वह मार्कअप बनाते हैं, इसलिए आप कंपोनेंट लिखते हैं और ईमेल के लिए सुरक्षित आउटपुट पाते हैं।

क्या मैं एक ही टेम्पलेट को अलग-अलग डेटा के साथ दोबारा उपयोग कर सकता हूँ?

हाँ। टेम्पलेट React कंपोनेंट हैं, इसलिए वे props लेते हैं। हर प्राप्तकर्ता के लिए एक ही कंपोनेंट को अलग-अलग मानों के साथ रेंडर करें, फिर हर परिणाम भेजें।

React Email और भेजने वाला API काम को साफ़ तौर पर बाँट लेते हैं: एक संदेश को आकार देता है, दूसरा उसे डिलीवर करता है। भेजने की ओर प्रबंधित टेम्पलेटिंग के लिए Bird ईमेल टेम्पलेट देखें।