How to Send Emails with React Using Resend-JS Tutorial-php.cn

How to Send Emails with React Using Resend

Lisa Kudrow

Release： 2025-02-08 13:12:11

Original

581 people have browsed it

This article demonstrates how to seamlessly integrate email functionality into your React applications using React Email and Resend. We'll build a contact form within a Next.js application as a practical example. Previously, email integration in React was notoriously challenging, but these tools drastically simplify the process.

How to Send Emails with React Using Resend

Key Advantages:

Simplified Email Creation and Sending: React Email and Resend streamline email development, eliminating the need for complex workarounds.
Comprehensive Guide: This tutorial provides a step-by-step walkthrough of setting up a Next.js app, integrating Resend, creating email components with React Email, and implementing email sending functionality.
Practical Portfolio Contact Form: We'll build a functional contact form, demonstrating input validation with Zod and React Hook Form, email template creation with React Email, and email dispatch via Resend.

Setting Up Your Next.js Application:

Begin by cloning the starter code from the provided GitHub repository. The starter project includes a basic Next.js 13 app (using the App Router) featuring a contact form with Zod and React Hook Form for validation. The onSubmit function within the contact form component is where we'll add our email sending logic:

function onSubmit(values: z.infer<typeof formschema="">) {
  // Email sending logic will be implemented here
  console.log(values);
}

Copy after login

(Note: Styling and form building are omitted for brevity. Tailwind CSS or standard CSS can be used for styling.)

Configuring Resend:

Obtain Your API Key: Log in or create a Resend account. From the dashboard, generate a new API key.

How to Send Emails with React Using Resend

Set Up Environment Variables: Create a .env.local file in your project's root directory and add your API key:

<code>RESEND_API_KEY=your_api_key_here</code>

Copy after login

Domain Verification (Optional): For sending unlimited emails, verify your domain with Resend by adding a DNS record (this step is optional for this tutorial).

How to Send Emails with React Using Resend

Creating the Email Component (Email.tsx):

Import necessary components from @react-email/components:

import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";

Copy after login

Define an interface for email data:

interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}

Copy after login

Create the email component:

const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  <Html>
    <Head>
      <Preview>A message from {name}</Preview>
    </Head>
    <Tailwind>
      <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
        <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
          <strong>{name}</strong> would like to contact you!
        </Heading>
        <Text className="text-black text-[14px] leading-[24px]">
          Here is the message: {content}
        </Text>
        <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
        <Text className="text-[#666666] text-[12px] leading-[24px]">
          This message was sent by {name}. Contact them at {emailAddress} or {phoneNumber}
        </Text>
      </Container>
    </Tailwind>
  </Html>
);

Copy after login

How to Send Emails with React Using Resend

Sending the Email with Resend (api/send/route.ts):

Import necessary modules:

function onSubmit(values: z.infer<typeof formschema="">) {
  // Email sending logic will be implemented here
  console.log(values);
}

Copy after login

Create a Resend instance:

<code>RESEND_API_KEY=your_api_key_here</code>

Copy after login

Define a Zod schema for validation:

import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";

Copy after login

Implement the POST handler:

interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}

Copy after login

Update the onSubmit function in your contact form to send a POST request to /api/send:

const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  <Html>
    <Head>
      <Preview>A message from {name}</Preview>
    </Head>
    <Tailwind>
      <Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]">
        <Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0">
          <strong>{name}</strong> would like to contact you!
        </Heading>
        <Text className="text-black text-[14px] leading-[24px]">
          Here is the message: {content}
        </Text>
        <Hr className="border border-solid border-[#eaeaea] my-[26px] mx-0 w-full" />
        <Text className="text-[#666666] text-[12px] leading-[24px]">
          This message was sent by {name}. Contact them at {emailAddress} or {phoneNumber}
        </Text>
      </Container>
    </Tailwind>
  </Html>
);

Copy after login

This completes the email sending functionality. Remember to replace placeholder email addresses with your actual email addresses and handle potential errors appropriately. The complete source code can be found on GitHub (link provided in the original text).

The above is the detailed content of How to Send Emails with React Using Resend. For more information, please follow other related articles on the PHP Chinese website!