Resend Email Notifications

NEXTY.DEV built-in Resend integration as the email service provider, along with pre-configured utility functions and email templates. You don't need to start from scratch - just follow the steps in this guide to:

• Add your own email templates (e.g., order notifications, membership expiration reminders, etc.)
• Send emails from server actions
• Ensure sender information and unsubscribe links follow best practices

Prerequisites

• Before using email notification features, please complete Resend configuration

Step 1. Architecture Overview

In NEXTY.DEV, the core email-related files are:

• Resend client initialization: lib/resend/index.ts
• Unified sending entry point & contact management: actions/resend/index.ts
• Specific business scenario Action examples: actions/newsletter/index.ts
• React email templates: emails/*.tsx

We recommend routing all Resend-related calls through actions/resend rather than instantiating new Resend() in your business logic. This approach allows you to:

• Centrally manage API keys, sender email addresses, and unsubscribe logic
• Avoid redundant Resend client configuration across multiple locations

Step 2. Environment Variables & Basic Configuration

Before writing code, ensure the following environment variables are configured:

• RESEND_API_KEY: Your Resend API Key
• RESEND_AUDIENCE_ID: Audience ID for contact grouping
• ADMIN_NAME: Sender name (e.g., NEXTY.DEV Team)
• ADMIN_EMAIL: Sender email address (e.g., [email protected])
• NEXT_PUBLIC_SITE_URL: Full site domain for generating absolute links in emails

In your local development environment, configure these in .env.local (example):

RESEND_API_KEY=your_resend_api_key
RESEND_AUDIENCE_ID=your_audience_id
ADMIN_NAME="NEXTY.DEV Team"
ADMIN_EMAIL="[email protected]"
NEXT_PUBLIC_SITE_URL=https://yourdomain.com

Step 3. Resend Client: Unified Entry Point

NEXTY.DEV has pre-configured the Resend client in lib/resend/index.ts, which displays a console warning if the API key is missing.

In other files, you simply need:

import resend from '@/lib/resend';

However, in most scenarios, you won't use this instance directly. Instead, you should prioritize using the sendEmail method introduced in the next section.

Step 4. Core Sending Utility: actions/resend/index.ts

actions/resend/index.ts is the most important file for email functionality extension. It provides two methods:

• sendEmail: Sends emails and adds users to Resend Contacts
• removeUserFromContacts: Removes users from Contacts (commonly used for unsubscribing)

The sendEmail parameter definition is as follows (simplified):

interface SendEmailProps {
  email: string;                         // Recipient email address
  subject: string;                       // Email subject
  react: React.ComponentType<any> | React.ReactElement; // React email template
  reactProps?: Record<string, any>;      // Props passed to template (optional)
}

Internally, it handles the following:

• Returns an error if email is empty
• Returns an error if Resend environment variables aren't properly configured
• Adds the user to Contacts using RESEND_AUDIENCE_ID
• Composes the sender using ADMIN_NAME + ADMIN_EMAIL
• Generates an unsubscribe token and link based on the recipient's email
• Sends the email using resend.emails.send with the standard List-Unsubscribe header

Step 5. Built-in Example: Newsletter Welcome Email

actions/newsletter/index.ts demonstrates a complete example with the following flow:

• Normalizes and validates user-inputted email addresses
• Implements rate limiting (prevents malicious API abuse)
• Prepares email subject and unsubscribe link
• Calls sendEmail to send the NewsletterWelcomeEmail template

Logic snippet (pseudo-code level):

await sendEmail({
  email: normalizedEmail,
  subject: `Welcome to ${siteConfig.name} Newsletter!`,
  react: NewsletterWelcomeEmail,
  reactProps: {
    email: normalizedEmail,
    unsubscribeLink,
  },
});

You can fully replicate this pattern in your own business logic by simply replacing:

• Template component (react field)
• Template props (reactProps)
• Subject line copy

Step 6. Notes

• Resend's free plan allows you to store 1,000 contacts and send 3,000 emails per month. If this doesn't meet your needs, you'll need to upgrade your plan.
• When creating new email templates, maintain consistent styling across different templates to benefit your brand image.
• Email templates use siteConfig.name and siteConfig.url for brand information, so ensure your configuration in config/site.ts is correct.
• Email templates cannot use lucide-react. Use SVG icons or absolute image links instead.
• Email templates cannot use Tailwind CSS. Use inline styles instead.
• Email templates cannot use relative links. Always use absolute links.

When creating new email templates, simply have AI reference existing email templates to generate new ones, no need for manual review of every detail.