В этой статье мы рассмотрим, как отправлять электронные письма с помощью React Email и Resend. Мы также создадим типичную контактную форму портфолио для отправки этих электронных писем с помощью Next.js.
До недавнего времени создавать и отправлять электронные письма в React было чрезвычайно сложно, так как не было надлежащей документации о том, как создавать шаблоны электронной почты с хакерскими <table>трюками с тегами, или документации о том, как отправлять электронные письма.
Большая часть трудностей с использованием электронной почты была устранена благодаря созданию React Email и Resend. Эти продукты, разработанные одной и той же командой, предоставили разработчикам потрясающий опыт работы с электронной почтой.
Настройка следующего приложения
Начнем с настройки Next.js. Клонируйте стартовую ветку этого репозитория GitHub, чтобы получить стартовый код. На изображении ниже показано, что мы должны увидеть при запуске сервера разработки.
Стартовый код состоит из простого приложения Next.js 13 (с App Router ), в котором есть компонент контактной формы с надлежащей проверкой с использованием Zod и React Hook Form.
Мы будем реализовывать onSubmitфункцию в компоненте контактной формы:
function onSubmit(values: z.infer<typeof formSchema>) { // TODO: implement console.log(values); }
Примечание: мы не будем рассказывать, как создать форму или как оформить само электронное письмо, так как это можно сделать с помощью Tailwind или обычного CSS.
Настройка повторной отправки
Давайте теперь посмотрим, как настроить Resend.
Получение ключа API
Чтобы отправить электронное письмо с помощью Resend SDK, нам сначала нужно получить ключ API. Перейдите на веб-сайт Resend и войдите или создайте учетную запись, указав свою электронную почту или данные GitHub.
После того, как вы вошли в систему, вы должны увидеть панель инструментов, как показано на рисунке ниже.
Нажмите кнопку «Добавить ключ API», чтобы получить ключ API. Получив ключ API, перейдите в корень проекта, создайте файл.env.localи вставьте ключ API следующим образом:
RESEND_API_KEY=************
Это позволит нам позже использовать службы повторной отправки в нашем приложении.
Проверка домена
Повторная отправка требует, чтобы мы подтвердили домен, с которого мы хотим отправлять неограниченное количество электронных писем, добавив запись DNS на их веб-сайт.
Для этого перейдите на панель инструментов «Повторно отправить», перейдите на вкладку «Домены» и нажмите кнопку «Добавить домен», как показано на рисунке ниже.
Оттуда мы можем подтвердить домен и использовать этот конкретный адрес электронной почты. В этом простом руководстве мы не будем проверять адреса электронной почты.
Создание компонента электронной почты
Пришло время создать компонент электронной почты. В componentsпапке создайте файл с именем Email.tsxи импортируйте следующие компоненты из React Email:
import { Body, Container, Head, Heading, Hr, Html, Preview, Tailwind, Text, } from "@react-email/components"; import * as React from "react";
Для электронной почты изменятся только значения данных формы (то есть имя, сообщение, адрес электронной почты и номер телефона человека). Эти значения можно использовать в качестве реквизита для электронной почты, поэтому давайте создадим для этого интерфейс:
interface ContactMeEmailProps { name: string; emailAddress: string; phoneNumber: string; content: string; }
Фактический компонент электронной почты будет выглядеть так:
const VercelInviteUserEmail = ({ name, content, emailAddress, phoneNumber, }: ContactMeEmailProps) => {};
Для текста предварительного просмотра электронной почты мы могли бы просто сказать, что «такой-то имеет сообщение». Это будет реализовано так:
const previewText = `${name} has a message`;
Теперь о самом JSX. Сначала нам нужно обернуть нашу электронную почту тегом <Html>и отобразить теги <Head>и <Preview>(для текста предварительного просмотра). Затем нам нужно обернуть содержимое в <Tailwind>тег, чтобы использовать стиль Tailwind, и <Body>тег:
<Html> <Head /> <Preview>{previewText}</Preview> <Tailwind> <Body className="bg-white my-auto mx-auto font-sans"> {...} </Body> </Tailwind> </Html>
Затем мы можем добавить <Container>компонент с некоторым общим стилем, чтобы контейнер, в котором отображается электронное письмо, выглядел лучше:
<Container className="border border-solid border-[#eaeaea] rounded my-[40px] mx-auto p-[20px] w-[465px]"> </Container>
Далее внутри контейнера мы можем добавить простой заголовок с несколькими стилями с надписью «Кто-то хотел бы связаться с вами по поводу чего-то!»
<Heading className="text-black text-[24px] font-normal text-center p-0 my-[30px] mx-0"> <strong>{name}</strong> would like to contact you about something! </Heading>
Затем мы можем отобразить фактическое содержимое письма с помощью встроенного <Text>компонента:
<Text className="text-black text-[14px] leading-[24px]"> Here is the message: </Text> <Text className="text-black text-[14px] leading-[24px]"> {content} </Text>
Наконец, мы можем добавить <Hr>компонент и еще один <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}. You can contact him through his email {emailAddress} or his phone number {phoneNumber} </Text>
На этом наша электронная почта готова. Как вы, наверное, заметили, React Email упрощает создание электронных писем, потому что его встроенные компоненты практически идентичны обычным тегам HTML.
Электронное письмо должно выглядеть примерно так, как показано на изображении ниже.
Теперь мы готовы отправить электронное письмо с помощью Resend!
Отправка электронной почты с повторной отправкой
Чтобы отправить электронное письмо, нам сначала нужно реализовать конечную точку API. В файле api/send/route.ts(уже созданном в стартовых файлах) убедитесь, что присутствуют следующие импорты:
import ContactMeEmail from "@/components/Email"; import { NextRequest, NextResponse } from "next/server"; import { Resend } from "resend"; import * as z from "zod";
Затем создайте экземпляр Resend SDK следующим образом:
const resend = new Resend(process.env.RESEND_API_KEY);
Примечание. Если вы использовали другое имя переменной среды для своего ключа API, обязательно замените его правильно.
Затем вставьте следующую схему Zod:
const sendRouteSchema = z.object({ name: z.string().min(2), emailAddress: z.string().email(), phoneNumber: z.string().min(2), content: z.string().min(2), });
Эта схема представляет тело запроса, отправленного клиентом. Теперь давайте деструктурируем тело запроса, чтобы получить эти поля в POSTфункции:
const { name, emailAddress, phoneNumber, content } = await req .json() .then((body) => sendRouteSchema.parse(body));
Теперь, чтобы отправить электронное письмо, мы используем sendфункцию из нашего экземпляра Resend следующим образом:
const data = await resend.emails.send({ from: "from email", to: ["delivery email"], subject: `${name} has a message!`, react: ContactMeEmail({ name, emailAddress, phoneNumber, content }), });
Если вы подтвердили свой домен в Vercel, вы можете использовать адрес электронной почты с этим доменом в поле from, и toполе должно быть вашим адресом электронной почты. Если вы хотите обеспечить дополнительную безопасность адресов электронной почты, вы можете установить их как переменные среды.
Теперь нам нужно реализовать фактическое действие выборки на клиенте. В компоненте контактной формы ( components/ContactForm.tsx) нам нужно получить конечную точку API внутри функции следующим образом onSubmit:
await fetch("/api/send", { method: "POST", body: JSON.stringify({ name: values.name, emailAddress: values.email, phoneNumber: values.phone, content: values.content, }), });
Обязательно пометьте функцию как asyncсвязанную с оператором await. Вам решать, как вы хотите реализовать состояния загрузки и обработки ошибок.
И с этим мы успешно отправили электронное письмо с помощью Resend!
Заключение
Большая часть головной боли с созданием и отправкой электронных писем в React была решена с помощью React Email и Resend. Это комбинация из двух ударов, которая обеспечивает потрясающий опыт разработчика и делает работу очень быстро.
