用 Nodemailer 为你的 Next.js 项目添加邮件通讯功能

本文为翻译作品，原文链接：Automate 200+ emails daily: Nodemailer + Next.js 13 integration.

你认为任何 web 应用程序都必须具备的功能是什么？

如果你说“交流”，那你就完全正确了。

Nodemailer 一个能帮你实现自动化电子邮件通讯的强大工具。

在本文中，我们将在 Next.js 13 中无缝集成 Nodemailer，向你展示如何利用 Nodemailer 的功能从 Next.js 应用程序中轻松发送电子邮件。

那么，让我们开始这次编码探险，提升 web 应用的用户体验吧！

设置 Next.js 13 项目环境

要设置 Next.js 项目，请查看这里的说明。安装过程通常包括在终端运行以下命令。

npx create-next-app@latest

安装依赖

在项目目录下打开终端，执行以下命令之一即可开始：

# 注意：@types/nodemailer 包
# 仅适用于 TS 项目。

npm install nodemailer @types/nodemailer
yarn add nodemailer @types/nodemailer
pnpm add nodemailer @types/nodemailer

设置 Gmail

在本教程中，我将使用 Gmail 作为 SMTP 服务器，但如果你有足够的信心，也可以使用其他 SMTP 服务器。

1. 访问这个 URL，并确保在你的谷歌账户上激活了 2FA，然后继续进行第二步。我个人推荐使用验证器应用程序，因为它很容易进行验证和配置。
2. 返回这个 URL，并滚动到页面底部，你会找到一个名为应用密码的部分。
3. 创建一个应用程序密码，将应用程序设置为邮件，将设备设置为你喜欢的设备，我个人设置为 Windows 计算机。
4. 点击 "生成 "并将应用密码复制到安全的地方，我们很快就会用到。

创建 Nodemailer API 路由

在创建 API 端点之前，请在 Next.js 13 项目根目录下创建一个名为 .env.local 的文件，并复制以下内容：

NODEMAILER_EMAIL=<你的谷歌邮箱>
NODEMAILER_PASSWORD=<你的应用密码>

请务必使用之前生成的应用程序密码，因为您的个人密码将无法使用。

1. 在应用程序 app/ 目录下创建一个名为 api/ 的文件夹，其中包含一个名为 email 的子文件夹和一个名为 route.ts 的文件；结构如下：app/api/email/route.ts

2. 复制以下代码：

import { NextResponse, type NextRequest } from "next/server"
import nodemailer from "nodemailer"
import Mail from "nodemailer/lib/mailer"

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

  const transport = nodemailer.createTransport({
    service: "gmail",
    auth: {
      user: process.env.NODEMAILER_EMAIL,
      pass: process.env.NODEMAILER_PASSWORD,
    },
  })

  const mailOptions: Mail.Options = {
    from: process.env.NODEMAILER_EMAIL,
    to: process.env.NODEMAILER_EMAIL,
    subject: `Message from (${email})`,
    text: message,
  }

  try {
    await transport.sendMail(mailOptions)
    return NextResponse.json({ message: "成功！", status: 200 })
  } catch (err) {
    return NextResponse.json({ message: "失败！", status: 500 })
  }
}

我们等待从客户端发送的电子邮件和消息；我们将很快实现客户端。 接下来我们定义一个 transport，它在底层配置了你的 Gmail SMTP 服务器。 接下来我们配置 mailOptions（邮件选项）以发送一封电子邮件给你自己，以用户的电子邮件作为主题，以邮件内容作为正文。 最后，我们执行 sendMail 操作，并使用 try-catch 块适当地处理成功或失败。

创建联系表单

现在 API 端点已经就绪，我们需要编写客户端代码与该端点通信，从而通过 nodemailer 发送电子邮件。

在 app/page.tsx 中，复制以下代码：

import ContactForm from "@/components/ContactForm"

const page = () => {
  return (
    <main className="flex grow flex-col items-center justify-center">
      <div className="space-y-4">
        <h1 className="text-4xl">联系我们</h1>
        <ContactForm />
      </div>
    </main>
  )
}

export default page

1. 在与 app/ 目录同一级别上，创建一个名为 components/ 的文件夹，并在其中创建一个名为 ContactForm.tsx 的文件。

2. 为 ContactForm.tsx 复制以下代码：

"use client"

import { useState } from "react"

function ContactForm() {
  const [email, setEmail] = useState("")
  const [message, setMessage] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    await fetch("/api/email", {
      method: "POST",
      body: JSON.stringify({ email, message }),
    })
  }

  return (
    <div>
      <h2>联系我们</h2>
      <form onSubmit={handleSubmit} className="space-y-10">
        <div>
          <label>电子邮件:</label>
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
        <div>
          <label>消息:</label>
          <textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            required
          ></textarea>
        </div>
        <button type="submit">提交</button>
      </form>
    </div>
  )
}

export default ContactForm

• 这是一个基本表单，接收用户的电子邮件和消息。
• 当用户提交表单时，电子邮件和消息被发送到 api/email 端点，执行 route.ts 内的代码，从而发送电子邮件。

下面是它的实际效果：

结论

就是这样！现在，您可以通过电子邮件每天自动发送邮件了。