The Modern Next.js 15 Email Architecture
In Next.js 15, sending email from client components is an anti-pattern that exposes API keys. The modern pattern renders React Email templates inside asynchronous Server Actions or Route Handlers, dispatching payloads via HTTP fetch.
1. Designing the React Email Component (WelcomeEmail.tsx)
Using @react-email/components, define a responsive email template with clean Tailwind styling.
TYPESCRIPT
import { Html, Head, Body, Container, Text, Link, Preview } from '@react-email/components';
import * as React from 'react';
interface WelcomeEmailProps {
name: string;
loginUrl: string;
}
export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
return (
<Html>
<Head />
<Preview>Welcome to SadaSend, {name}</Preview>
<Body style={{ backgroundColor: '#09090b', fontFamily: 'monospace', color: '#fafafa', padding: '40px 20px' }}>
<Container style={{ maxWidth: '560px', margin: '0 auto', border: '1px solid #27272a', padding: '32px', borderRadius: '4px' }}>
<Text style={{ fontSize: '20px', fontWeight: 'bold' }}>Welcome aboard, {name}</Text>
<Text style={{ fontSize: '14px', lineHeight: '1.6', color: '#a1a1aa' }}>
Your account is provisioned. You can now mint scoped agent keys and configure sending domains.
</Text>
<Link href={loginUrl} style={{ display: 'inline-block', backgroundColor: '#10b981', color: '#000', padding: '10px 20px', borderRadius: '3px', textDecoration: 'none', fontWeight: 'bold' }}>
Open Dashboard →
</Link>
</Container>
</Body>
</Html>
);
}2. Server Action Dispatch (actions/send-welcome.ts)
Render the component to HTML using render() and dispatch to SadaSend API.
TYPESCRIPT
'use server';
import { render } from '@react-email/components';
import { WelcomeEmail } from '@/emails/WelcomeEmail';
export async function sendWelcomeAction(userEmail: string, userName: string) {
const html = await render(WelcomeEmail({ name: userName, loginUrl: 'https://sadasend.com/app' }));
const res = await fetch('https://api.sadasend.com/v1/emails', {
method: 'POST',
headers: {
'Authorization': `Bearer ${process.env.SADASEND_API_KEY}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
to: userEmail,
subject: 'Welcome to SadaSend',
html,
text: `Welcome to SadaSend, ${userName}! Open your dashboard: https://sadasend.com/app`,
}),
});
const data = await res.json();
if (!res.ok) throw new Error(data.message || 'Failed to send');
return { success: true, messageId: data.id };
}Why native fetch beats legacy SMTP in serverless Next.js
- Zero connection pooling overhead during Vercel or AWS Lambda scale-up.
- Sub-20ms HTTP dispatch latency.
- Built-in edge compatibility without requiring Node.js net sockets.
Early Access
Building AI agents that send email?
Join the SadaSend early access waitlist to get scoped API keys, recipient allowlists, and Model Context Protocol (MCP) servers upon launch.