Resend Integration

Resend is an email API designed specifically for developers that simplifies the process of sending, tracking, and managing transactional emails. It helps developers focus on building applications without delving into the complexities of email infrastructure.

In the NEXTY.DEV boilerplate, we use Resend to implement the following notifications:

• New user welcome emails
• Magic Link login emails
• Newsletter subscription notifications
• Payment failure email notifications

Resend not only allows sending emails through API but also enables sending marketing emails using the Broadcast feature in the Resend dashboard.

Next, I'll introduce the integration process of Resend in the NEXTY.DEV boilerplate.

Registration and Basic Configuration

1. Visit Resend and register an account with your email

2. Go to the API Keys page and create an API Key, add the API Key to your project's environment variable RESEND_API_KEY

3. Open Audience - Segment, create a Segment, copy the Segment ID to your project's environment variable RESEND_SEGMENT_ID

Good to know

Segment can be understood as a group, it is not required, only when you need to distinguish users from which feature.

In the NEXTY.DEV boilerplate, if you have filled in RESEND_SEGMENT_ID, then when calling the method to send an email, it will add the contact to the Segment; if you have not created a Segment or have not filled in RESEND_SEGMENT_ID, it will only be added to the default Contact list.

// add user to contacts
if (RESEND_SEGMENT_ID) {
  await resend.contacts.segments.add({
    email,
    segmentId: RESEND_SEGMENT_ID,
  });
} else {
  await resend.contacts.create({
    email,
  });
}
 
// remove user from contacts
if (RESEND_SEGMENT_ID) {
  await resend.contacts.segments.remove({
    email,
    segmentId: RESEND_SEGMENT_ID,
  });
} else {
  await resend.contacts.remove({
    email,
  });
}

The NEXTY.DEV boilerplate only provides one Segment ID environment variable. If you need to manage email contacts more精细化（most products don't need this）, you can create multiple Segment IDs, and then use different Segment IDs in different feature entry points, so you can manage contacts in different Segments in the Resend backend later.

4. Next, open the Domains page and add your domain

5. Add DNS records

There are 4 DNS records to set up here. Clicking the "Sign in to Cloudflare" button in the top right will automatically handle the first three, but you'll need to manually add the _dmarc record on the Cloudflare DNS page.

The best practice for configuring the _dmarc record is as follows:

• Initial Phase (Early Monitoring): Start with v=DMARC1; p=none; rua=mailto:[email protected]; ruf=mailto:[email protected]; pct=100 and monitor the reports. This allows you to view your email sending situation and identify issues that might cause email failures without affecting email delivery. Analyze aggregate reports to understand which emails failed SPF and DKIM validation.
• Intermediate Phase (Mid-term Quarantine): After you're confident about your email sending situation, change the policy to v=DMARC1; p=quarantine; rua=mailto:[email protected]; ruf=mailto:[email protected]; pct=100. This will quarantine emails that fail validation into the spam folder.
• Final Phase (Final Rejection): Once you're completely certain your email sending configuration is correct, change the policy to v=DMARC1; p=reject; rua=mailto:[email protected]; ruf=mailto:[email protected]; pct=100. This will reject emails that fail validation. This is the most secure setting that provides maximum protection for your domain.

rua and ruf need to be replaced with your email address, which will receive email sending reports.

The main purpose of configuring _dmarc is to prevent external attacks and stop attackers from impersonating your domain to send phishing emails, malware, or spam.

After all DNS records pass verification, the Status will show Verified.

Good to know:

If the Status doesn't update for a long time, you can try clicking Restart.

Verification

Now you can try submitting an email subscription in the page Footer and perform the following verification:

• Check the Emails page in the Resend dashboard to review email sending status
• Check the Audiences page in the Resend dashboard to review Audience additions
• Check the Logs page in the Resend dashboard to review email sending logs
• Check the submitted email address to see if you received the notification email sent by the API

In the NEXTY.DEV boilerplate, I've also built in a rate limiter implemented with Upstash Redis, and provided usage examples in the email subscription feature. In the next chapter, we'll complete the Upstash configuration to make the rate limiter effective.