React Email i Resend 2024

React Email — tworzenie szablonów email w JSX?

React Email: Resend Team. Email templates jako React komponenty. Renderuje do HTML + Text. Kompatybilny z wszystkimi klientami email. Instalacja: npm install react-email @react-email/components. Podstawowy template: import {Html, Body, Container, Text, Button, Heading, Hr, Img} from '@react-email/components'. import * as React from 'react'. export default function WelcomeEmail({name}: {name: string}) { return Html. Body. Container. Heading Witaj, {name}! /Heading. Text Dziękujemy za rejestrację /Text. Button href='https://myapp.com' Zacznij /Button. /Container. /Body. /Html. }. Renderowanie: import {render} from '@react-email/render'. const html = await render(WelcomeEmail({name: 'Jan'})). const text = await render(WelcomeEmail({name: 'Jan'}), {plainText: true}). Preview: npx email dev — localhost:3000. Hot reload. Podgląd w różnych klientach. Komponenty: Html, Head, Body. Container — centrowanie. Section, Row, Column — layout. Text, Heading, Hr. Button, Link. Img — optymalizowany. Preview — pre-header tekst. Font — Google Fonts. Tailwind CSS: import {Tailwind} from '@react-email/tailwind'. Tailwind config={tailwindConfig}. Klasy Tailwind w emailu. Nie wszystkie — email constraints. Stylowanie: inline styles. style={{color: '#000', fontSize: '16px'}}. CSS inline jest wymagany dla email clients. Media queries ograniczone.

Resend — wysyłanie emaili w Next.js i Node.js?

Resend: Guillermo Rauch team. Email API. Developer-first. React Email wbudowane. Darmowy plan: 3000 emaili/miesiąc. Instalacja: npm install resend. Next.js API Route: import {Resend} from 'resend'. import {WelcomeEmail} from '@/emails/welcome'. const resend = new Resend(process.env.RESEND_API_KEY). export async function POST(req: Request) { const {name, email} = await req.json(). const {data, error} = await resend.emails.send({from: 'noreply@myapp.com', to: email, subject: 'Witamy!', react: WelcomeEmail({name})}). if (error) return Response.json({error}, {status: 500}). return Response.json({data}) }. Node.js: const resend = new Resend('re_...'). await resend.emails.send({from: 'Team MyApp noreply@myapp.com', to: 'user@example.com', subject: 'Hello', html: html, text: text}). Attachments: attachments: [{filename: 'invoice.pdf', content: pdfBuffer}]. Tags: tags: [{name: 'category', value: 'welcome'}]. Batch sending: resend.batch.send([emailObj1, emailObj2]). Webhooks: resend.webhooks.create({endpointUrl, events: ['email.delivered', 'email.bounced']}). Domain setup: DNS records. SPF, DKIM automatycznie przez Resend. Domain verification w dashboard. Nodemailer alternatywa: npm install nodemailer. const transporter = nodemailer.createTransport({host: 'smtp.resend.com', port: 465, auth: {user: 'resend', pass: API_KEY}}). Nodemailer + React Email: render() -> html string -> nodemailer.send.

Inne biblioteki email — Nodemailer, MJML, SendGrid i Mailgun?

Nodemailer (klasyczny): npm install nodemailer. Wiele transportów: SMTP, SES, Gmail. const transporter = nodemailer.createTransport({service: 'gmail', auth: {user, pass}}). SMTP sendmail. OAuth2 dla Gmail. Nodemailer + React Email = stack produkcyjny. MJML: język do emaili responsywnych. Transpiluje do HTML email-safe. mj-section, mj-column, mj-text. mjml template.mjml -o output.html. MJML + React: mjml-react. Mniej popularny niż React Email. Mailgun: API jak Resend. mg.messages.create(domain, {from, to, subject, html}). Webhooks, tracking. Droższy. Dobre dokumentacja. SendGrid (Twilio): popularny enterprise. @sendgrid/mail. sgMail.setApiKey(). sgMail.send({to, from, subject, text, html}). Dynamic templates (Handlebars). Transactional + marketing. Postmark: developer-friendly. Świetna deliverability. Templates w UI lub API. Tagi + statystyki. Amazon SES: tani. AWS integracja. Nodemailer SES transport. DKIM i bounce obsługa. Porównanie dostarczalności: Resend, Postmark — najlepsza. SendGrid, Mailgun — dobra. Gmail SMTP — słaba (produkcja). Własny serwer SMTP — ryzykowna. Email testing: Mailtrap — sandbox. Ethereal Email — darmowy SMTP. Inbucket — self-hosted. React Email Preview — lokalne szablony. Webhooks i tracking: open/click tracking. Bounce handling. Unsubscribe list. ISP reputation. Blacklist monitoring.

Email dostarczalność — SPF, DKIM, DMARC i best practices?

SPF (Sender Policy Framework): DNS TXT record. Kto może wysyłać z domeny. v=spf1 include:amazonses.com include:sendgrid.net -all. '-all' = odrzuć innych. '~all' = soft fail. DKIM (DomainKeys Identified Mail): kryptograficzna sygnatura. Publiczny klucz w DNS. Prywatny klucz na serwerze. Resend/SendGrid generują automatycznie. Weryfikuj domeny w panelu. DMARC: policyfor handling failures. DNS TXT record. _dmarc.yourdomain.com. v=DMARC1; p=quarantine; rua=mailto:reports@yourdomain.com. p=none (monitor), quarantine, reject. Raporty na email. Google postmaster tools. Warmup IP: nowy adres IP — stopniowo zwiększaj. Dzień 1: 100 emaili. Dzień 7: 1000. Dzień 30: 10000+. Nie wysyłaj bulk od razu. Content best practices: nie używaj spam words (FREE, WINNER). Ratio tekst/obrazy przynajmniej 60/40. Plain text version zawsze. Unsubscribe link wymagany (CAN-SPAM, GDPR). Bounce handling: hard bounce -> usuń email. Soft bounce -> kilka prób. ISP blokuje przy >2% hard bounce. Complaint rate: poniżej 0.1%. Unsubscribe list: Honor requests w 10 dni (CAN-SPAM). Natychmiast (GDPR). List-Unsubscribe header. One-click unsubscribe (Gmail/Yahoo 2024). Monitoring: Google Postmaster Tools. Microsoft SNDS. Blacklist check: MXToolbox. Mail-Tester.com.

React Email zaawansowane — dark mode, responsywność i testy?

Dark mode w emailu: @media (prefers-color-scheme: dark) — Obsługuje: Apple Mail, Outlook 2019+, Gmail Android. Nie obsługuje: Gmail web, Outlook web. Implementacja: style={{backgroundColor: '#ffffff', colorScheme: 'light dark'}}. Lub: TargetingMediaQuery dla dark. Responsywność email: Container z maxWidth. Section z width 100%. Media queries ograniczone. Tabela dla layout email-safe. React Email responsywny: Column width auto. Preview mode. Testy email renderowania: Litmus — 100 klientów email. Email on Acid — testy. Koszt wysoki. Darmowe: Mailtrap Email Testing. PutsMail. Email Address Testing. Email accessibility: lang attribute. role='presentation' dla layout tables. alt tekst dla obrazów. Kontrast kolorów. Rozmiar tekstu min 14px. Klikalne obszary min 44px. Nie polegaj na obrazach. Zmienne i kondycjonowanie: const isNew = user.createdAt === today. {isNew ? WelcomeSection / : RegularSection / }. Dynamiczne komponenty. Tłumaczenia: i18n w emailach. Osobne szablony per język. Lub dynamiczne propsy. Loop przez produkty: {items.map(item => Row key={item.id}. Column. Text {item.name} /Text. /Column /Row)}. Email + React Server Components: Nie. React Email to oddzielny renderer. Nie Next.js RSC. Ale można wywołać z Server Actions. Email queue: BullMQ + Resend. Rate limiting. Retry logic. Dead letter queue. Scheduled emails.

Wyślij zapytanie