Email / Next.js

Emaile Transakcyjne w Next.js

Resend + React Email, SendGrid, Nodemailer, kolejkowanie BullMQ i deliverability best practices w Next.js i Node.js.

Resend

DX email API

React Email

React templates

Inngest

Job queuing

SPF+DKIM

Deliverability

6 serwisów email — porównanie

Resend, SendGrid, Mailgun, Postmark, AWS SES i Nodemailer — plan darmowy, DX, React Email integracja i najlepszy use case.

Serwis	Plan darmowy	DX	React Email	Kiedy
Resend	3000/mies, 100/dzień	Najlepsza (React Email)	Tak (natywny)	Next.js, małe-średnie projekty, DX
SendGrid	100/dzień	Dobra	Dynamic Templates	Duże wolumeny, marketing campaigns
Mailgun	100/dzień (trial)	Dobra (API-first)	Ręcznie HTML	EU data, walidacja emaili, API
Postmark	100/mies	Dobra	Ręcznie HTML	Deliverability critical, SaaS
AWS SES	62K/mies (z EC2)	Podstawowa	Ręcznie HTML	Duże wolumeny, niski koszt, AWS
Nodemailer + SMTP	Zależy od SMTP	Minimalna	renderToStaticMarkup	Własny SMTP, open-source, dev

Często zadawane pytania

Co to jest Resend i jak wysyłać emaile transakcyjne w Next.js?

Resend: nowoczesny email API dla deweloperów (2023). Zbudowany przez twórcę WorkOS. Developer-first DX. React Email integration. Bezpłatny plan: 3000 emaili/miesiąc, 100/dzień. Instalacja: npm install resend. import {Resend} from 'resend'. const resend = new Resend(process.env.RESEND_API_KEY). Wysyłanie: await resend.emails.send({from: 'hello@fotz.pl', to: 'user@example.com', subject: 'Witaj!', html: '<p>Treść emaila</p>'}). Z React Email: react: EmailTemplate({name: 'Adam'}). Domenowa weryfikacja: DNS TXT, MX, DKIM records. Resend weryfikuje Twoją domenę. Zwiększa deliverability. Route Handler (Next.js): export async function POST(req: Request) {const {to, subject} = await req.json(). const {data, error} = await resend.emails.send({from: 'noreply@fotz.pl', to, subject, react: WelcomeEmail({name: to})}). return Response.json(data || error)}. Resend SDK features: emails.list, emails.get (tracking). Typy wiadomości: transakcyjne (reset hasła, potwierdzenia), marketingowe (newsletters). Resend vs SendGrid vs Nodemailer: Resend — najlepsza DX, React Email, nowy. SendGrid — dojrzały, duże wolumeny, marketing campaigns. Nodemailer — self-managed SMTP, open-source, bez SaaS. Resend Webhooks: email.delivered, email.opened, email.clicked, email.bounced, email.complained. Subskrybuj zdarzenia dla analytics.

React Email — szablony emaili z React komponentami?

React Email: biblioteka do budowania emaili jako React komponenty. Compatibility across email clients (Gmail, Outlook, Apple Mail). Preview w przeglądarce. Export do HTML. Instalacja: npm install @react-email/components react-email. Komponenty: Html, Head, Body, Container, Section, Row, Column. Text, Heading, Button, Link, Hr, Img. Preview server: npx react-email dev. Preview na localhost:3000. Hot reload. Przykład template: import {Html, Body, Container, Text, Button, Img} from '@react-email/components'. export function WelcomeEmail({name}: {name: string}) {return Html lang='pl' {Body style={{fontFamily: 'sans-serif'}} {Container {Text Witaj, {name}. Text Dziękujemy za rejestrację. Button href='https://www.fotz-studio.pl' Zaloguj się. }}}. Integracja z Resend: resend.emails.send({react: WelcomeEmail({name: 'Adam'})}). Resend konwertuje React do HTML automatycznie. react-email + Nodemailer: renderToStaticMarkup(EmailTemplate()). nodemailer.sendMail({html: renderedHtml}). Tailwind w React Email: Tailwind component (experimental). CSS inline dla email clients. Responsive email: sprawdź campaign.monitor, emailonacid do testowania. Przykładowe szablony: resetPassword, orderConfirmation, invoiceEmail, verifyEmail, welcomeEmail, subscriptionRenewal. Dostępne na react.email/examples. Litmus/Email on Acid: testowanie w 50+ klientach. Kosztowne ale ważne. Szybka alternatywa: MJML (XML-based email framework), zcompiluje do HTML.

SendGrid, Mailgun i AWS SES — enterprise email services?

SendGrid (Twilio): od 2009. Transakcyjne i marketingowe. Marketing Campaigns. 100 email/dzień free. Instalacja: @sendgrid/mail. sgMail.setApiKey(key). sgMail.send({to, from, subject, text, html}). Dynamic Templates: template w SendGrid UI. sgMail.send({templateId: 'd-xxx', dynamicTemplateData: {name, actionUrl}}). Unsubscribe groups — RODO compliance. Email analytics: opens, clicks, bounces, spam reports. Inbound parse: parse incoming emails na webhook. Mailgun (Sinch): API-first. Zaprojektowany przez deweloperów. EU data residency. Walidacja emaili: mg.validate.get(email). Dobre deliverability. Routes (inbound). AWS SES (Simple Email Service): najtańszy ($0.10 per 1000 emails). Wymaga konfiguracji: DKIM, SPF, DMARC, feedback loop. Trudniejszy setup. Idealny przy dużych wolumenach. nodemailer + SES transport. Postmark: transakcyjne only. Fenomenalne deliverability. Activity dashboard. 25 free / miesiąc w live. Świetne dla saas. Message Streams. SMTP.js: client-side (zły pomysł — eksponuje credentiale). Zawsze server-side. Emaile transakcyjne (lista): welcome email. reset hasła. weryfikacja emaila. potwierdzenie zamówienia. faktura PDF attachment. newsletter. powiadomienie o aktywności. upomnienie o płatności. alert bezpieczeństwa (nowe logowanie). Deliverability best practices: własna domena (nie gmail.com). SPF, DKIM, DMARC skonfigurowane. List hygiene (czysty bounce). Double opt-in. Unsubscribe link obligatoryjny.

Nodemailer i własny SMTP — kiedy nie potrzebujesz SaaS?

Nodemailer: Node.js SMTP library (2010). Zero external dependency. Używany w 92% Node projektów. Konfiguracja SMTP: const transporter = nodemailer.createTransport({host: 'smtp.example.com', port: 587, secure: false, auth: {user: 'user@example.com', pass: process.env.EMAIL_PASS}}). Wysyłanie: await transporter.sendMail({from: '"Fotz" info@fotz.pl', to: 'user@example.com', subject: 'Temat', html: emailHtml, attachments: [{filename: 'invoice.pdf', content: pdfBuffer}]}). Gmail SMTP (dev only): {service: 'gmail', auth: {user: GMAIL, pass: APP_PASSWORD}}. App Password z Google Account Security. NIE używaj w produkcji (rate limits, trust issues). Ethereal Email (test): const account = await nodemailer.createTestAccount(). Preview URL zamiast wysyłania. nodemailer.getTestMessageUrl(info). MailHog (local dev): Docker container. Łapie wszystkie emaile lokalnie. docker run -p 1025:1025 -p 8025:8025 mailhog/mailhog. SMTP port 1025, UI port 8025. Self-hosted email server: Postal, Maddy, SimpleLogin. Własna infrastruktura. Problemy: reputation, spam filtering, SPF/DKIM/DMARC. Dla startupów — nie polecane. Kiedy Nodemailer: własny SMTP serwer. Google Workspace. Office365. Masz już email infrastructure. Kiedy Resend/SendGrid: brak własnej infrastruktury. Potrzebujesz analytics. Scale. PDF attachments: nodemailer + pdfkit lub pdf-lib. Generate buffer -> attach. Resend: data: pdfBuffer -> convertToBase64. {filename: 'faktura.pdf', content: base64String}.

Emaile w Next.js — Server Actions, queuing i rate limiting?

Server Actions + email: 'use server'. async function sendWelcomeEmail(formData: FormData). Nie blokuj UI — email może być wolny. Background job pattern: Nie wysyłaj emaila w Server Action bezpośrednio. Wstaw do kolejki (Redis/Inngest/Trigger.dev). Worker przetworzy asynchronicznie. Inngest: job queuing dla Next.js. inngest.createFunction({id: 'send-welcome-email'}, {event: 'user/signup'}, async ({event}) => {await resend.emails.send({...})}). Trigger.dev: background jobs, scheduled tasks. createTask('send-email', {run: async (payload) => {...}}). BullMQ (Redis-based): const emailQueue = new Queue('emails', {connection}). emailQueue.add('welcome', {to, name}). Worker: emailQueue.process(async (job) => {await resend.emails.send({...})}). Rate limiting emaili: upstash/ratelimit. Limity per user: 1 reset email per 5 minut. Limity globalne: max 100 emaili/minutę. Cooldown okresy. Email verification flow: Generuj unique token (crypto.randomUUID()). Zapisz token do DB z expiry (15 min). Wyslij email z linkiem /verify?token=xxx. Po kliknięciu: sprawdź token, oznacz email jako verified, usuń token. Resend token po upływie. Monitoring: Resend webhook -> bounce tracking. Usuń lub oznacz bounced adresy. SendGrid suppression list. Nie wysyłaj do bounced/unsubscribed. RODO/GDPR: przechowuj zgody marketingowe. Unsubscribe link w każdym emailu marketingowym. Loguj datę zgody. Dane osobowe w emailach — minimalizacja.

Czytaj dalej