邮件狂欢：Next.js和Resend SDK的电子邮件魔法

原创

zayyo

发布于 2023-10-12 23:35:56

5.5K0

Resend是一个高效电子邮件发送平台，可保证直接发送到您的收件箱而不是垃圾邮件文件夹。Resend 拥有针对各种编程语言的不同 SDK，包括 PHP、Ruby、JavaScript、Go、Python 和 Elixir。Resend 还支持无服务器和 SMTP 发送电子邮件。

React Email是一个开源组件库，由 Resend 背后的同一团队创建。该库可用于创建不同类型的现代响应式电子邮件模板。

重发的特点

通过 Resend，您可以使用各种编程语言（例如 Python、Ruby、Go、Elixir、PHP 和 JavaScript）发送电子邮件。
从经过验证的 DNS（域名系统）记录发送电子邮件。
用户友好的仪表板，显示电子邮件的状态，无论是已送达、已发送还是已退回。
直接在仪表板内查看电子邮件。

在本教程中，您将学习如何使用 React-Email、Next.js 和 Resend 从经过验证的域发送电子邮件。

先决条件

以下是您在本教程中需要遵循的内容：

Node.js 安装在您的计算机上。
一个免费的 Resend 帐户（免费注册 Resend）。
一个 GitHub 帐户。

重新发送入门

要开始使用 Resend，请访问resend.com创建帐户。您可以使用您的电子邮件地址或 GitHub 帐户进行注册。

请确保您通过电子邮件注册后收到的电子邮件中单击“确认帐户”按钮来确认您的帐户。之后，您将被重定向到重新发送仪表板。

下一步是按照以下步骤创建 API 密钥：

导航至仪表板左侧的API 密钥部分。
单击页面右侧的“创建 API 密钥”按钮。
将出现一个包含表单的模式窗口。为API 密钥名称选择一个名称，然后单击“添加”按钮。

单击“添加”按钮后，将为您生成 API 密钥。您稍后将使用此 API 密钥，因此请记下它。

验证发送电子邮件的域

必须验证将用于发送电子邮件的域。在仪表板的左侧，选择域并单击添加域按钮：

出现一个新页面。通过在输入字段中输入域来添加域。然后单击“添加”按钮。

现在您已添加域，下一步是添加域名系统 (DNS) 记录。

添加 DNS 记录 要添加 DNS 记录，请将鼠标放在警报通知下方的DNS 记录上。您将看到一个剪贴板图标，使您可以复制每个列出项目的值。然后，您可以单击仪表板上的DNS 提供商。 💡 DNS 提供商可以是 Namecheap、GoDaddy、Hostinger 等。

您将被重定向到 DNS 提供商页面，您可以在其中添加 DNS 记录。添加您从重新发送仪表板复制的所有 DNS 记录。然后单击“添加”按钮。

接下来，导航回重新发送仪表板并单击验证 DNS 记录按钮。

之后，您的仪表板状态将从“未开始”更改为“待处理”。这表示 DNS 记录验证正在进行中。验证完成后，您将收到一封电子邮件通知。

验证成功后，您的仪表板状态将更改为“已验证”。现在您可以从经过验证的域发送电子邮件。

在 Next.js 项目中设置重新发送

要在 Next.js 项目中设置重新发送，请单击此处根据现有模板存储库生成起始文件。运行以下命令来克隆该项目：

git clone <repo-git-url-provided-above>

通过运行以下命令导航到项目目录：

cd react-email-demo

接下来，通过在项目的终端中运行以下命令来安装依赖项：

yarn install

完成后，yarn run dev在终端中运行并在 Web 浏览器中导航到localhost:3000 。您应该看到启动器 UI：

现在您已经成功运行了 Next.js 项目，请.env.local在项目的根目录中创建该文件。将为您生成的重新发送 API 密钥添加到此文件中。

RESEND_API_KEY=YOUR_RESEND_API_KEY

表单组件 目录中，通过添加以下代码来components更新文件：ContactUsForm.tsx

// components/ContactUsForm.tsx

'use client';

import { useForm } from 'react-hook-form';
import { toast } from 'react-hot-toast'; // updated code

type FormInput = {
  name: string;
  email: string;
  message: string;
};

export default function ContactUsForm() {
  const {
    register,
    handleSubmit,
    formState: { isSubmitting },
    reset,
  } = useForm<FormInput>();

   /**
   * The function sends a POST request to a server with form data and displays a success notification.
   * @param {FormInput} formData - The formData parameter is an object that contains the input values
   * from the form.
   */
  async function onSubmit(formData: FormInput) { 
    await fetch('/api/send', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },

      body: JSON.stringify({
        name: formData.name,
        email: formData.email,
        message: formData.message,
      }),
    }).then(() => {
      // Toast notification
      toast.success('Your email message has been sent successfully');
    });

    reset();
  }

  return (
    <div className='w-10/12 md:w-6/12'>
      <form
        onSubmit={handleSubmit(onSubmit)} // updated code
        className='mb-10 mt-5 flex w-full flex-col rounded-md bg-white p-5 py-14 shadow-lg md:max-w-3xl md:px-10 mx-auto'
      >
        <input
          className='mt-4 mb-3 h-14 block w-full rounded-md border px-3 text-gray-600 outline-none focus:border-stone-500 focus:outline-none md:mb-0'
          type='text'
          placeholder='Name'
          required
          {...register('name')}
        />
        <input
          className='mt-4 mb-3 h-14 block w-full rounded-md border px-3 text-gray-600 outline-none focus:border-stone-500 focus:outline-none md:mb-0'
          type='email'
          placeholder='Email'
          required
          {...register('email')}
        />
        <textarea
          className='mt-4 mb-5 block w-full rounded-md border px-3 text-gray-600 outline-none focus:border-stone-500 focus:outline-none md:mb-0'
          placeholder='Message Us'
          rows={6}
          required
          {...register('message')}
        />

        <button
          disabled={isSubmitting}
          type='submit'
          className='bg-blue-700 px-6 py-3 disabled:bg-gray-500 block-primary rounded-md cursor-pointer text-white mt-4 font-bold'
        >
          Book Appointment
        </button>
      </form>
    </div>
  );
}

在这里，您执行了以下操作：

从库导入的useForm钩子react-hook-form来处理表单状态和提交。
toast从库导入react-hot-toast，在成功发送电子邮件后显示通知。
定义一个名为的异步函数onSubmit来在用户提交表单时处理表单提交。在此函数内，使用 fetch 方法发出 API 请求，该方法将 POST 请求发送到端点， /api/send请求正文中的表单数据为 JSON。
reset提供的功能用于useForm在提交后重置表单字段。

实施动态电子邮件模板

使用 React Email，创建现代电子邮件模板变得非常容易。根据React Email网站，有一组标准组件可以帮助您构建令人惊叹的电子邮件，而无需处理创建基于表格的布局和维护过时标记的混乱。

要使用这组标准组件来构建电子邮件模板，请导航到该components目录并创建EmailMessage.tsx文件。将以下代码添加到该文件中：

// components/EmailMessage.tsx

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

type MessageUsEmailProps = {
  name: string;
  email: string;
  message: string;
};

const MessageUsEmail = ({ name, email, message }: MessageUsEmailProps) => {
  const previewText = `Weekly Updates 🚀${name} sent you a message.`;

  return (
    <Html>
      <Head />
      <Preview>{previewText}</Preview>
      <Tailwind>
        <Body className='bg-white my-auto mx-auto font-sans'>
          <Container className='my-[20px] mx-auto p-[20px] max-w-4xl'>
            <Heading className='text-black text-[20px] font-normal text-left'>
              <strong>Hello {name},</strong>
            </Heading>
            <Text className='text-black text-[14px] leading-[24px]'>
              {message}
            </Text>

            <Hr className='my-[16px] mx-0 w-full' />
            <Text className='text-[#666666] text-[12px]'>
             In a world where every email matters, Resend empowers you to send emails that captivate, engage, and convert. It's more than just an email platform; it's a catalyst for modernizing your email communication.
Don't settle for outdated email practices. Embrace the future of email communication with Resend and watch your messages soar to new heights.
            </Text>
            <Text className='text-[#666666] text-[12px]'>
              This email is delivered to you through the Resend SDK
              integrations.✨
            </Text>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  );
};

export default MessageUsEmail;

在这里，您执行了以下操作：

导入以@react-email/components使用用于电子邮件渲染的特定元素构建电子邮件模板。
该组件接收name、email、和message作为 type 的属性MessageUsEmailProps。
该Head组件用于在电子邮件<head>部分中包含元信息。
该Preview组件用于定义电子邮件客户端预览窗格中显示的文本。
该Tailwind组件用于应用 Tailwind CSS 类来设置电子邮件模板的样式。

使用重新发送 SDK 发送电子邮件

到目前为止，您已经验证了域，在 Next.js 项目中设置了重新发送，并实现了动态电子邮件模板。是时候使用重新发送来发送电子邮件了。

在该app目录中，创建api/send/route.ts文件并将以下代码片段添加到该文件中：

// app/api/send/route.ts

import { Resend } from 'resend';
import { NextRequest, NextResponse } from 'next/server';
import MessageUsEmail from '@/components/EmailMessage';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(req: NextRequest) {
  const { name, email, message } = await req.json();

  try {
    const data = await resend.emails.send({
      from: 'Hello <rayden@sonya.dev>', // your verified domain
        to: `${email}`, // the email address you want to send a message
      subject: `${name} has a message!`,
      react: MessageUsEmail({ name, email, message }),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

从上面的代码片段中，您执行了以下操作：

进口Resend自'resend'.
Next.js 服务器端函数是从NextRequest其中导入的。NextResponse'next/server'
导入了MessageUsEmail用于生成您要发送的电子邮件内容的组件。
用于RESEND_API_KEY创建 Resend 实例。
该POST函数是一个异步函数，用于处理传入的 POST 请求。
、和变量是从解析的请求正文中提取的name。emailmessage

现在，导航到项目的主页并在表单字段中输入一些数据。点击“预约”按钮。发送到您的电子邮件的邮件应该出现在您的收件箱中。

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

登录后参与评论

0 条评论

热度