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

React Email एक टेम्पलेटिंग लाइब्रेरी है, ईमेल भेजने वाला टूल नहीं। आप अपना ईमेल @react-email/components का उपयोग करके एक React कंपोनेंट के रूप में लिखते हैं, उसे HTML स्ट्रिंग में बदलने के लिए render() को कॉल करते हैं, फिर डिलीवरी के लिए वह HTML किसी भी ईमेल प्रोवाइडर को सौंप देते हैं। यह बँटवारा मायने रखता है: React Email मार्कअप संभालता है (और अलग-अलग क्लाइंट की वे खामियाँ भी, जिनकी वजह से ईमेल HTML लिखना मुश्किल होता है), जबकि भेजने का काम एक अलग प्रोवाइडर करता है। पूरी प्रक्रिया नीचे दी गई है।

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

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

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:    "you@yourdomain.com",
  to:      ["delivered@bird.dev"],
  subject: "Your receipt",
  html,
}).safe();

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

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

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

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

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

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

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

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

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