React E-posta Şablonları: Güzel İşlemsel E-postalar Oluşturun
İşlemsel e-postaların açılma oranı %45'tir - ortalama pazarlama e-postasının neredeyse 5 katı - ancak çoğu şirket, marka algısına zarar veren, kötü biçimlendirilmiş HTML e-postaları gönderir. React Email, bileşen tabanlı geliştirme modelini e-posta tasarımına getirerek geliştiricilerin tanıdık React modelleriyle güzel, duyarlı şablonlar oluşturmasına olanak tanır.
Önemli Çıkarımlar
- React Email bileşenleri istemciler arası uyumlu HTML'ye (Gmail, Outlook, Apple Mail) derlenir
- Bileşen tabanlı mimari, yeniden kullanılabilen üstbilgiler, altbilgiler ve düzen modellerine olanak tanır
- Çalışırken yeniden yükleme özelliğine sahip yerel önizleme sunucusu şablon geliştirmeyi hızlandırır
- Sorunsuz NestJS entegrasyonu için işleme işlevlerini (ham bileşenler değil) dışa aktarın
E-postaya Neden Tepki Vermelisiniz?
E-posta HTML'sinin oldukça zor olduğu biliniyor. Farklı istemciler HTML'yi farklı şekilde işler; Outlook, oluşturma motoru olarak Word'ü kullanır, Gmail stil etiketlerini çıkarır ve mobil istemciler, görünüm alanı işleme açısından farklılık gösterir.
React Email bunu önceden oluşturulmuş bileşenlerle soyutlar: Kap (duyarlı genişlik), Bölüm (tablo tabanlı bloklar), Satır/Sütun (ızgara sistemi), Metin, Başlık, Düğme (Outlook'ta çalışır), Resim, Bağlantı, İk ve Önizleme (gizli gelen kutusu metni).
Proje Kurulumu
@react-email/components ve react-email'i yükleyin. Bir package/email-templates dizinindeki şablonları, şablonlar/, bileşenler/ ve oluşturma işlevlerini dışa aktaran render.ts dosyasıyla düzenleyin.
Bina Şablonları
Paylaşılan Düzen Bileşenleri
Markanızla birlikte yeniden kullanılabilir EmailHeader ve EmailFooter bileşenleri oluşturun. Bunlar, tüm işlemsel e-postalarda tutarlılık sağlar.
Şablon Yapısı
Her e-posta şablonu, yazılan destekleri alan bir React bileşenidir:
import {
Html, Head, Body, Container, Section,
Text, Button, Hr,
} from "@react-email/components";
interface WelcomeEmailProps {
userName: string;
loginUrl: string;
}
export function WelcomeEmail({ userName, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Body style={{ fontFamily: "Arial, sans-serif" }}>
<Container style={{ maxWidth: "600px", margin: "0 auto" }}>
<Text>Hi {userName},</Text>
<Text>Your account is ready.</Text>
<Button
href={loginUrl}
style={{ background: "#001834", color: "#fff", padding: "12px 24px" }}
>
Sign In
</Button>
</Container>
</Body>
</Html>
);
}
NestJS Entegrasyonu için Oluşturma
Kritik model: ham bileşenleri değil, oluşturma işlevlerini dışa aktarın. NestJS, JSX derlemesi olmadan çalışır, bu nedenle React bileşenlerini doğrudan içe aktarmak hatalara neden olur.
Şablonları içe aktaran ve eşzamansız işlevleri dışa aktaran bir render.ts dosyası oluşturun:
import { render } from "@react-email/render";
import { WelcomeEmail } from "./templates/welcome";
export async function renderWelcomeEmail(props: {
userName: string;
loginUrl: string;
}) {
return render(WelcomeEmail(props));
}
NestJS'de HTML almak için oluşturma işlevini çağırın ve ardından e-posta taşıyıcınız aracılığıyla gönderin.
Geliştirme İş Akışı
Yerel Önizleme
Çalışırken yeniden yükleme ile tarayıcı tabanlı bir önizleme için npx react-email dev komutunu çalıştırın. Değişiklikler anında görünür ve yinelemeyi hızlandırır.
Müşteriler Arası Test
Litmus veya Email on Asit kullanarak istemciler arasında test yapın. Minimum testte: Gmail (Chrome), Outlook (Windows), Apple Mail, Gmail (iOS), Apple Mail (iOS), Yahoo Mail ve Outlook.com.
Şekillendirmeyle İlgili En İyi Uygulamalar
- Yalnızca satır içi stiller: İstemci uyumluluğu için E-posta satır içi stillerine otomatik olarak tepki verin
- Sistem yazı tipleri: Arial, Georgia, Verdana'yı kullanın. Özel yazı tiplerinin desteği sınırlıdır.
- 600 piksel maksimum genişlik: Masaüstü ve mobil cihazlar için standart e-posta genişliği
- Tablo tabanlı düzen: React Email bileşenleri Outlook uyumluluğu için tablolar olarak işlenir
- Karanlık mod: Apple Mail ve Outlook karanlık mod desteği için meta etiketler içerir
Yaygın E-posta Şablonları
Sipariş Onayı
Sipariş numarasını, fiyatları içeren ürün listesini, teslimat adresini, tahmini teslimatı ve mevcut olduğunda takip bağlantısını ekleyin. Öğe listesi için bir tablo düzeni kullanın.
Şifre Sıfırlama
Minimum düzeyde tutun: kısa bir açıklama, sınırlı süreli bağlantı içeren belirgin sıfırlama düğmesi, bağlantının paylaşılmamasına ilişkin güvenlik bildirimi ve destek iletişim bilgileri.
Fatura E-postası
PDF faturasını ekleyin ve e-posta gövdesine bir özet ekleyin: fatura numarası, tarih, vade tarihi, toplam tutar ve çevrimiçi görüntüleme/ödeme düğmesi.
Gönderim Bildirimi
Sipariş numarasını, taşıyıcı adını, tıklanabilir bağlantıyla birlikte takip numarasını, tahmini teslim tarihini ve gönderilmekte olan ürünleri ekleyin.
Sıkça Sorulan Sorular
S: Neden sürükle ve bırak özellikli bir e-posta oluşturucu kullanmıyorsunuz?
Sürükle ve bırak oluşturucular, pazarlama e-postaları için çalışır ancak işlemsel e-postalar için dinamik içerik yeteneklerinden yoksundur. Sipariş onayları ve faturalar, kodun daha iyi işleyebileceği veriye dayalı şablonlar gerektirir.
S: React Email herhangi bir gönderim hizmetiyle çalışır mı?
Evet. Nodemailer, SendGrid, Postmark, AWS SES, Resend veya herhangi bir SMTP sunucusuyla uyumlu standart HTML dizelerinin çıktısını alır.
S: E-posta yerelleştirmesini nasıl gerçekleştiriyoruz?
Yerel ayarı ve çevrilmiş dizeleri şablon desteği olarak iletin. Oluşturma işlevi tüm metni parametre olarak alır, böylece çeviriler, oluşturma öncesinde i18n sisteminiz tarafından gerçekleştirilir.
S: Dinamik görseller veya grafikler ekleyebilir miyiz?
URL'lerde barındırılan, sunucu tarafında oluşturulan görselleri kullanın. QuickChart gibi kütüphaneler grafikleri resim olarak işler. Gömülü resimlerden kaçının; uyumluluk için barındırılan URL'leri kullanın.
Sırada Ne Var
React Email, işlemsel e-posta geliştirmeyi sinir bozucu tablo düzeni alıştırmalarından modern bileşen tabanlı iş akışlarına dönüştürür.
E-posta şablonu geliştirme için ECOSIRE ile iletişime geçin veya entegre e-posta iş akışları için Odoo uygulama hizmetlerimizi keşfedin.
ECOSIRE tarafından yayınlandı - işletmelerin kurumsal yazılım çözümleriyle ölçeklenmesine yardımcı oluyor.
Yazan
ECOSIRE Research and Development Team
ECOSIRE'da kurumsal düzeyde dijital ürünler geliştiriyor. Odoo entegrasyonları, e-ticaret otomasyonu ve yapay zeka destekli iş çözümleri hakkında içgörüler paylaşıyor.
İlgili Makaleler
Drizzle ORM ve NestJS ile API'ler Oluşturma: Tam Kılavuz
Drizzle ORM ve NestJS ile tür açısından güvenli API'ler oluşturun. Üretim uygulamalarına yönelik şema tanımını, geçişleri, sorgu oluşturmayı, ilişkileri, işlemleri ve test modellerini öğrenin.
Next.js Uluslararasılaştırma: i18n Kılavuzunu next-intl ile tamamlayın
Next-intl ile Next.js'de uluslararasılaştırmayı uygulayın. Yönlendirme, çeviriler, sunucu/istemci bileşenleri, RTL desteği, SEO ve dağıtımı kapsayan eksiksiz kılavuz.