Send Transactional Email in Next.js App Router

The correct way to send transactional emails in a Next.js App Router project is to use a server-side Route Handler or Server Action that calls your email provider’s API (Resend, Sequenzy, SendGrid, Notify, etc.), never from a client component. This keeps your API key secure and ensures reliable delivery.

🛠 Implementation Guide

Set up environment variables

Add your provider’s API key to .env.local (e.g., RESEND_API_KEY=...).

Never expose keys in client-side code.

Create a Route Handler

Add a file at app/api/email/route.ts.

Example with Notify:

ts

// app/api/email/route.ts

export async function POST() {

try {

const response = await fetch("https://notify.cx/api/email/send", {

• method: "POST",
• headers: {
• "Content-Type": "application/json",
• "x-api-key": process.env.NOTIFY_API_KEY!,

},

• body: JSON.stringify({
• from: "noreply@yourdomain.com",
• to: "user@example.com",
• subject: "Welcome!",
• message: "<h1>Hello</h1><p>Thanks for joining us.</p>",

}),

});

if (!response.ok) throw new Error(await response.text());

return Response.json(await response.json());

} catch (err) {

• return Response.json({ error: String(err) }, { status: 500 });

}

}

Trigger from client or Server Action

Client component:

js

async function sendWelcomeEmail() {

• await fetch("/api/email", { method: "POST" });

}

Or call directly inside a Server Action tied to a form submission.

Use React Email for templates

• Install: npm install @react-email/components resend.

Build type-safe HTML templates with React components.

Preview locally with hot reload before sending.

⚠️ Best Practices

Always send from a verified domain with SPF/DKIM/DMARC configured.

Keep emails short and transactional (welcome, password reset, receipts).

Log errors server-side, return safe messages client-side.

Test deliverability across Gmail, Outlook, Yahoo before production.

✅ Recommended Providers

Resend → Modern DX, free tier (3,000 emails/month).

Sequenzy → SaaS-focused, built-in automations.

SendGrid → Enterprise scale, high volume.

Notify → Lightweight, single fetch call integration.