SaaS Box

Emails & Delivery

SaaS Box uses Resend as the core delivery provider. The mail module is designed to be as lightweight as possible, utilizing raw HTML strings for maximum performance and zero dependency overhead.

Architecture Philosophy

When building the email infrastructure, I chose to keep things incredibly simple. Instead of forcing a heavy component library into the boilerplate, emails are generated using standard HTML strings and template literals. This ensures your serverless functions boot up instantly without parsing complex React trees just to send a password reset link.

Simplicity

Native HTML

By using standard HTML strings, you have complete control over the exact markup sent to the user's inbox. You can easily inject dynamic data using standard Javascript template literals.

Reliability

Resend Delivery

Resend is built specifically for developers. It offers a modern API, excellent deliverability rates, and seamless integration with Next.js applications.

Resend Setup

Configure your API keys and verify your sender domain to ensure high deliverability.

1. API Keys

Create an account on Resend and generate an API key from your dashboard. This key gives your application permission to dispatch emails.

2. Domain Verification

To ensure your emails do not land in the spam folder, you must verify your domain in the Resend dashboard.

Important: Until your domain is fully verified, Resend only allows you to send test emails to the exact email address associated with your Resend account.

Environment Config

The mail module relies on two specific environment variables. Make sure to define them in your.env file.

RESEND_API_KEY="re_123456789"
EMAIL_FROM="SaaS Box <noreply@yourdomain.com>"

The Mail Client

How the Resend SDK is initialized within the boilerplate.

I initialize the core Resend client in a dedicated file. This ensures a single instance is reused across your serverless functions.

src/lib/resend.ts
import { Resend } from "resend";
import { env } from "@/env";

export const resend = new Resend(env.RESEND_API_KEY);

Sending Emails

The universal wrapper for dispatching HTML payloads.

To standardize how emails are sent, I created a sendEmail utility. It automatically applies your EMAIL_FROM environment variable and handles error checking natively.

src/lib/mail.ts
import { resend } from "./resend";
import { env } from "@/env";

export const sendEmail = async ({
to,
subject,
html,
}: {
to: string;
subject: string;
html: string;
}) => {
const { data, error } = await resend.emails.send({
from: env.EMAIL_FROM,
to,
subject,
html,
});

if (error) {
throw new Error(error.message);
}

return data;
};

Usage Example

When you need to send an email from a Server Action or API Route, simply import the utility and pass in your HTML string. Because it uses standard template literals, you can easily inject variables or translated strings directly into the markup.

import { sendEmail } from "@/lib/mail";

export async function notifyUser(email: string, name: string) {
const htmlContent = `
<div style="font-family: sans-serif; padding: 20px;">
<h1>Welcome to SaaS Box, ${name}!</h1>
<p>We are thrilled to have you on board.</p>
<a href="https://yourdomain.com/dashboard">Go to Dashboard</a>
</div>
`;

await sendEmail({
to: email,
subject: "Welcome aboard!",
html: htmlContent,
});
}

Frequently Asked Questions

Can I use React Email instead of HTML strings?

Absolutely. While SaaS Box ships with raw HTML templates to prioritize speed and simplicity, Resend fully supports React Email. If you prefer building emails as React components, you can easily install the @react-email/components package, update the sendEmail function to accept areact parameter instead of html, and pass your components directly to the Resend SDK.

How do I handle internationalization (i18n) in my emails?

Because the current setup uses standard Javascript template literals, you can easily load your translations on the server using getTranslations()and inject the localized strings directly into the HTML variables before calling sendEmail().

Official Documentation

Explore the Resend API and delivery network specifics.

Resend

Resend SDK

Domain verification and delivery API

← Previous SectionInternationalizationNext Section →Deployment