发送带有React电子邮件和Next.js的电子邮件-DEV365 开发者社区

在本教程中，我们将学习如何使用React电子邮件和Next.js

创建和发送HTML电子邮件

先决条件

入门

让我们从一个新的Next.js项目开始。您可以使用Next.js CLI创建一个新项目。

npx create-next-app next-email --ts

等待创建项目。创建项目后，让我们进入项目目录。

cd next-email

创建电子邮件模板

我们将使用React Email创建一个新的电子邮件模板。

让我们安装依赖项。

npm install react-email @react-email/html @react-email/text @react-email/section @react-email/container -E

现在，让我们使用React电子邮件组件创建一个新的电子邮件模板。这是一个简单的反应组件，将转换为HTML电子邮件模板。

我们将创建一个新的文件emails/WelcomeTemplate.tsx并添加以下代码。

import { Html } from "@react-email/html"
import { Text } from "@react-email/text"
import { Section } from "@react-email/section"
import { Container } from "@react-email/container"

export default function WelcomeEmail() {
  return (
    <Html>
      <Section style={main}>
        <Container style={container}>
          <Text style={heading}>Hi there!</Text>
          <Text style={paragraph}>Welcome to our app!</Text>
        </Container>
      </Section>
    </Html>
  )
}

// Styles for the email template
const main = {
  backgroundColor: "#ffffff",
}

const container = {
  margin: "0 auto",
  padding: "20px 0 48px",
  width: "580px",
}

const heading = {
  fontSize: "32px",
  lineHeight: "1.3",
  fontWeight: "700",
  color: "#484848",
}

const paragraph = {
  fontSize: "18px",
  lineHeight: "1.4",
  color: "#484848",
}

预览电子邮件模板

在您的package.json文件中添加以下脚本。

{
  "scripts": {
    "preview-email": "email dev"
  }
}

现在，您可以通过运行以下命令来预览电子邮件模板。

npm run preview-email

这将启动本地服务器并在浏览器中打开您的电子邮件模板。

与NodeMailer一起发送电子邮件

让我们安装NodeMailer。

npm install nodemailer

npm i --save-dev @types/nodemailer

创建一个新的助手文件lib/email.ts并添加以下代码。这将考虑使用NodeMailer和SMTP服务器发送电子邮件。

import nodemailer from "nodemailer"

type EmailPayload = {
  to: string
  subject: string
  html: string
}

// Replace with your SMTP credentials
const smtpOptions = {
  host: process.env.SMTP_HOST || "smtp.mailtrap.io",
  port: parseInt(process.env.SMTP_PORT || "2525"),
  secure: false,
  auth: {
    user: process.env.SMTP_USER || "user",
    pass: process.env.SMTP_PASSWORD || "password",
  },
}

export const sendEmail = async (data: EmailPayload) => {
  const transporter = nodemailer.createTransport({
    ...smtpOptions,
  })

  return await transporter.sendMail({
    from: process.env.SMTP_FROM_EMAIL,
    ...data,
  })
}

确保您的.env文件包含以下环境变量。

SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASSWORD=
SMTP_FROM_EMAIL=

现在，让我们创建一个新的文件pages/api/send-email.ts并添加以下代码。

import type { NextApiRequest, NextApiResponse } from "next"
import { render } from "@react-email/render"
import WelcomeTemplate from "../../emails/WelcomeTemplate"
import { sendEmail } from "../../lib/email"

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  await sendEmail({
    to: "kiran@example.com",
    subject: "Welcome to NextAPI",
    html: render(WelcomeTemplate()),
  })

  return res.status(200).json({ message: "Email sent successfully" })
}

现在您可以访问http://localhost:3000/api/send-email发送电子邮件。

NextAPI: A Next.js RESTful API Starter for building your next SaaS app