Email Delivery API Reference

Table of Contents

Overview

The Email Delivery Plugin helps you send emails easily in your FastStartup project. It uses Resend and React Email to handle email delivery and templates.

No need to set things up from scratch—this plugin comes pre-configured to save you time.

Key Features

  • Pre-configured email sending with Resend.
  • Email templates powered by React Email.
  • Easy-to-use sendEmail function for sending emails.
  • Simple setup using environment variables.

Use Cases

You can use the Email Delivery Plugin for:

  • Sending transactional emails (welcome emails, password resets).
  • Delivering marketing emails (newsletters, promotions).
  • Automating customer emails like free resource delivery.

Getting Started

Follow these steps to start sending emails:

1. Install the Plugin

The Email Delivery Plugin is already part of the FastStartup framework. No extra installation is needed.

2. Set Environment Variables

Add your Resend API key and default sender email to the .env file:

AUTH_RESEND_KEY=your-resend-api-key
NEXT_PUBLIC_RESEND_EMAIL=your-sender-email@example.com

Tip: You can get your Resend API key from Resend Dashboard.

3. Add Email Templates

Store your email templates in the following folder:

src/app/emails

Next, register the templates in the templates.ts file:

// src/plugins/emailDelivery/resend/templates.ts
import { FreeEbookEmail } from "@/app/emails/FreeEbookEmail";

export const TEMPLATES = {
  freeEbook: {
    template: FreeEbookEmail,
  },
};

4. Use sendEmail Function

The sendEmail function is ready to use and can be imported from:

import { sendEmail } from "@/plugins/emailDelivery/resend/actions";

Here’s how you use it:

sendEmail(
  "recipient@example.com", // recipient's email
  "Welcome to FastStartup", // subject line
  "freeEbook", // template from TEMPLATES
  { name: "John Doe" } // template props
);

Example Template Component

An email template looks like a React component:

// src/app/emails/FreeEbookEmail.tsx
import { Html, Text, Heading } from "@react-email/components";

export const FreeEbookEmail = ({ name }: { name: string }) => (
  <Html>
    <Heading>Hi {name},</Heading>
    <Text>Here’s your free ebook as promised!</Text>
    <Text>Enjoy reading.</Text>
  </Html>
);

API Overview

sendEmail

A function for sending emails.

Parameters:

ParameterTypeDescription
tostringRecipient's email address
subjectstringSubject line of the email
templatestringReact email template key as specified in template.ts
templatePropsobjectType-safe props passed to the email template component

Example:

sendEmail("test@example.com", "Your Free Ebook", "freeEbook", {
  name: "Jane",
});

Comparison to Alternatives

  • Nodemailer: Requires more manual setup and configuration.
  • SendGrid: Works well but can be expensive for smaller projects.
  • Email Delivery Plugin: Pre-configured, simple, and free to start with Resend.

If you’re using FastStartup, this plugin is the easiest option.

FAQ

1. What is Resend? Resend is an email delivery service designed for developers. It’s reliable, fast, and easy to integrate.

2. Can I customize email templates? Yes! You can create React components for your templates and pass dynamic props to customize them.

3. How do I get my Resend API key? Sign up for Resend and grab your API key from the dashboard.

4. What if I don’t want to use React Email? You can still send plain text or HTML emails without React Email.

5. Is the plugin free? The plugin itself is free to use for FastStartup clients. Resend offers a free plan to start with.