How to Send Emails with React Using Resend

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.

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:

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

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

Configuring Resend:

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

2. 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>

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

Creating the Email Component (Email.tsx):

Import necessary components from @react-email/components:

<code class="language-javascript">import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";</code>

Define an interface for email data:

<code class="language-typescript">interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}</code>

Create the email component:

<code class="language-javascript">const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  
    
      <preview>A message from {name}</preview>
    
    <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>
  
);</code>

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

1. Import necessary modules:

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

2. Create a Resend instance:

<code>RESEND_API_KEY=your_api_key_here</code>

3. Define a Zod schema for validation:

<code class="language-javascript">import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text } from "@react-email/components";
import * as React from "react";</code>

4. Implement the POST handler:

<code class="language-typescript">interface ContactMeEmailProps {
  name: string;
  emailAddress: string;
  phoneNumber: string;
  content: string;
}</code>

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

<code class="language-javascript">const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber }: ContactMeEmailProps) => (
  
    
      <preview>A message from {name}</preview>
    
    <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>
  
);</code>

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!