Resend Email in Next.js

Setup

npm install resend

Environment

# .env.local (never commit)
RESEND_API_KEY=re_xxxx
EMAIL_FROM="Your App <onboarding@resend.dev>"
FEEDBACK_TO_EMAIL=you@example.com

Document all vars in .env.example with comments, no real keys.

Config module (lib/email-config.ts)

export function getEmailConfig() {
  return {
    resendApiKey: process.env.RESEND_API_KEY,
    fromEmail: process.env.EMAIL_FROM ?? "App <onboarding@resend.dev>",
    feedbackToEmail: process.env.FEEDBACK_TO_EMAIL,
  };
}

export function isEmailConfigured(): boolean {
  return Boolean(process.env.RESEND_API_KEY);
}

Lazy-init client inside send functions — don't construct at module load (build-time safety).

Send helper

import { Resend } from "resend";

function getResend() {
  const { resendApiKey } = getEmailConfig();
  if (!resendApiKey) throw new Error("RESEND_API_KEY not configured");
  return new Resend(resendApiKey);
}

export async function sendEmail(opts: {
  to: string | string[];
  subject: string;
  html: string;
  replyTo?: string;
  attachments?: { filename: string; content: string }[]; // base64
}) {
  const { fromEmail } = getEmailConfig();
  const { error } = await getResend().emails.send({ from: fromEmail, ...opts });
  if (error) throw new Error(error.message);
}

Always escapeHtml() user-provided strings in HTML templates.

API route pattern

// app/api/feedback/route.ts
export async function POST(req: Request) {
  if (!isEmailConfigured()) {
    return Response.json({ error: "Email not configured" }, { status: 503 });
  }

  const body = await req.json();
  const parsed = feedbackSchema.safeParse(body);
  if (!parsed.success) {
    return Response.json({ error: parsed.error.flatten() }, { status: 400 });
  }

  try {
    await sendFeedbackEmail(parsed.data);
    return Response.json({ ok: true });
  } catch (e) {
    return Response.json({ error: "Failed to send" }, { status: 500 });
  }
}

Validate with Zod server-side. Rate-limit public routes — see nextjs-api-routes.

Client form

const res = await fetch("/api/feedback", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name, email, message }),
});
if (!res.ok) throw new Error((await res.json()).error);

Show loading state; track success/error analytics events.

Attachments (PDF export email)

Generate PDF server-side or accept base64 from client:

attachments: [{ filename: "report.pdf", content: pdfBase64 }],

Prefer server-side PDF generation for large payloads and security.

Sandbox vs production

Gmail +alias tricks do not work in sandbox — use exact account email for testing.

Production steps:

1. Add domain in Resend dashboard
2. Publish DNS records (SPF, DKIM)
3. Update EMAIL_FROM to verified sender

Security

• Rate-limit public feedback endpoints (middleware or edge)
• Never expose RESEND_API_KEY to client
• Sanitize/escape all user HTML
• Validate email format server-side
• Cap attachment size

HTML template baseline

<h2>Subject context</h2>
<p><strong>From:</strong> {{name}} &lt;{{email}}&gt;</p>
<p style="white-space:pre-wrap">{{message}}</p>
<p style="color:#64748b;font-size:12px;margin-top:24px">Sent via Your App</p>

Keep templates inline initially; extract to React Email only when complexity grows.