Resend

ShipAny supports using Resend to send emails, which can be used for scenarios such as sending email verification codes, payment notifications, marketing emails, and more.

Resend Setup

Register an account on Resend and log into the dashboard
Add a domain in the Resend dashboard, configure DNS records, and verify the domain
Create an API key in the Resend dashboard and copy the API key

ShipAny Configuration

In your ShipAny project configuration file, fill in the Resend-related configuration information.

Development environment configuration file .env.development
Production environment configuration file .env.production / wrangler.toml

RESEND_API_KEY = "re_xxx"
RESEND_SENDER_EMAIL = "[email protected]"

RESEND_API_KEY The API key created in the Resend dashboard
RESEND_SENDER_EMAIL Sender email address, the prefix can be customized, but the domain needs to be added and verified in the Resend dashboard first

For example, if the email domain configured in the Resend dashboard is mail.shipany.ai, then the sender email can be configured as [email protected] / [email protected] / [email protected], etc.

Sending Emails

In places where you need to send emails, choose the appropriate sending method based on the specific scenario.

Sending Text Emails

import { Resend } from "resend";
 
const resend = new Resend(process.env.RESEND_API_KEY!);
 
const result = await resend.emails.send({
  from: process.env.RESEND_SENDER_EMAIL!,
  to: ["[email protected]"],
  subject: "Hello from ShipAny with Resend",
  text: "Hello World.",
});
 
console.log("send email result", result);

Sending HTML Emails

import { Resend } from "resend";
 
const resend = new Resend(process.env.RESEND_API_KEY!);
 
const result = await resend.emails.send({
  from: process.env.RESEND_SENDER_EMAIL!,
  to: ["[email protected]"],
  subject: "Hello from ShipAny with Resend",
  html: "<p style='color: red;'>Hello from <a href='https://shipany.ai'>ShipAny</a>.</p>",
});
 
console.log("send email result", result);

Sending Template Emails

First, create an email template, for example in: @/components/email-templates/verify-code.tsx:

export function VerifyCode({ code }: { code: string }) {
  return (
    <div>
      <h1>Verify Code</h1>
      <p style={{ color: "red" }}>Your verification code is: {code}</p>
    </div>
  );
}

Import the template and send the email:

import { Resend } from "resend";
import { VerifyCode } from "@/components/email-templates/verify-code";
 
const resend = new Resend(process.env.RESEND_API_KEY!);
 
const result = await resend.emails.send({
  from: process.env.RESEND_SENDER_EMAIL!,
  to: ["[email protected]"],
  subject: "Hello from ShipAny with Resend",
  react: VerifyCode({ code: "123456" }),
});
 
console.log("send email result", result);

Using React Email

React Email comes with a large number of email components that make it easier to create email templates.

Install React Email component library

pnpm add resend @react-email/components

Create an email template

For example, write content in @/components/email-templates/react-email.tsx:

import * as React from "react";
import { Html, Button } from "@react-email/components";
 
export function ReactEmail(props: { url: string }) {
  const { url } = props;
 
  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
}

Import the template and send the email:

import { Resend } from "resend";
import { ReactEmail } from "@/components/email-templates/react-email";
 
const resend = new Resend(process.env.RESEND_API_KEY!);
 
const result = await resend.emails.send({
  from: process.env.RESEND_SENDER_EMAIL!,
  to: ["[email protected]"],
  subject: "Hello from ShipAny with Resend",
  react: ReactEmail({ url: "https://shipany.ai" }),
});
 
console.log("send email result", result);

Besides implementing email templates yourself, you can also choose a template from the React Email template marketplace, modify it, and use it directly.

References

Blog Stripe