1. 前言
邮件是现代 Web 应用中不可或缺的一部分。无论是注册确认、订单通知，还是营销邮件，发送可靠的电子邮件至关重要。在本教程中，我们将使用 Next.js 和 Gmail（谷歌邮箱） 来构建一个专业的邮件系统。我们将使用 Nodemailer 库与 Gmail 的 SMTP 服务器集成，发送邮件。
2. 配置 Gmail 帐户
要与 Gmail 的 SMTP 服务器集成，我们需要进行以下配置：
步骤 1：启用 Gmail 的 SMTP 服务
- 打开你的 Gmail 帐号。
- 进入 Google 邮件发送设置 页面，确保启用了“两步验证”。
- 创建一个 应用专用密码，并记录下来。
步骤 2：配置 Gmail 设置
- 使用以下 SMTP 设置来发送邮件：
- SMTP 服务器：
smtp.gmail.com - SMTP 端口：
465（SSL）或587（TLS） - 用户名：你的 Gmail 地址（例如
your-email@gmail.com） - 密码：你创建的应用专用密码
- SMTP 服务器：
3. 项目设置
步骤 1：初始化项目
在终端中运行以下命令来初始化一个新的 Next.js 项目：
npx create-next-app@latest my-email-system
cd my-email-system
步骤 2：安装 Nodemailer
Nodemailer 是一个非常流行的 Node.js 邮件发送库，它支持通过 SMTP 协议与 Gmail 集成。
npm install nodemailer
4. 创建邮件模板
接下来，我们将创建一个可复用的邮件模板。我们将在 utils 文件夹中创建一个 emailRenderer.js 文件，用于渲染 HTML 邮件模板。
步骤 1：创建模板函数
以下是一个简单的邮件模板，在 utils/emailRenderer.js 文件中，添加如下代码：
// utils/emailRenderer.js
export function renderEmailTemplate(templateName, data) {
const sharedStyles = {
mainContainer: "font-family: Arial, sans-serif; max-width: 600px;",
header: "text-align: center; margin-bottom: 30px;",
body: "font-size: 16px; line-height: 1.5;",
};
const templates = {
orderConfirmation: ({ orderNumber, items, total }) => `
<div style="${sharedStyles.mainContainer}">
<h2 style="${sharedStyles.header}">订单确认</h2>
<p style="${sharedStyles.body}">
订单号: ${orderNumber}<br>
商品: ${items.map(item => `${item.name} (数量: ${item.quantity})`).join(', ')}<br>
总计: ￥${total}
</p>
</div>
`,
// 添加其他模板...
};
return templates[templateName] ? templates[templateName](data) : '';
}
5. 实现邮件发送 API
在 Next.js 中，API 路由可以处理服务器端的请求。接下来，我们将在 app/api/send-email/route.js 文件中创建一个 API 路由，处理邮件发送。
步骤 1：实现邮件发送功能
在 app/api/send-email/route.js 文件中，添加如下代码：
import nodemailer from 'nodemailer';
import { renderEmailTemplate } from '@/utils/emailRenderer';
export async function POST(req) {
try {
const { toEmail, subject, templateName, templateData } = await req.json();
// 渲染邮件内容
const htmlContent = renderEmailTemplate(templateName, templateData);
// 创建 Nodemailer 传输器
const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: process.env.GMAIL_USER, // 你的 Gmail 地址
pass: process.env.GMAIL_PASS, // 你的应用专用密码
},
});
// 邮件选项
const mailOptions = {
from: process.env.GMAIL_USER, // 发送者地址
to: toEmail, // 收件人地址
subject: subject, // 邮件主题
html: htmlContent, // 邮件内容
};
// 发送邮件
const info = await transporter.sendMail(mailOptions);
return NextResponse.json({
success: true,
message: info.response, // 发送邮件的响应消息
});
} catch (err) {
console.error('发送邮件出错:', err);
return NextResponse.json(
{ error: '邮件发送失败', details: err.message },
{ status: 500 }
);
}
}
在上面的代码中：
- 我们使用 Nodemailer 创建了一个 SMTP 传输器来连接 Gmail。
- 邮件内容通过我们之前创建的模板渲染。
- 使用
sendMail函数发送邮件。
6. 测试邮件系统
我们可以通过简单的测试来验证邮件发送功能。
步骤 1：测试邮件发送
在 Next.js 项目的 pages/index.js 中，创建一个简单的前端页面，触发邮件发送请求：
import { useState } from 'react';
export default function Home() {
const [emailSent, setEmailSent] = useState(false);
const sendTestEmail = async () => {
const response = await fetch('/api/send-email', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
toEmail: 'test@example.com',
subject: '欢迎来到我们的商店！',
templateName: 'orderConfirmation',
templateData: {
orderNumber: 'ORD123',
items: [
{ name: '产品 1', quantity: 2, price: 29.99 },
],
total: 59.98,
},
}),
});
const data = await response.json();
if (data.success) {
setEmailSent(true);
}
};
return (
<div>
<h1>Next.js 邮件系统</h1>
<button onClick={sendTestEmail}>发送测试邮件</button>
{emailSent && <p>邮件已发送！</p>}
</div>
);
}
步骤 2：运行应用
通过运行以下命令启动开发服务器：
npm run dev
访问 http://localhost:3000，点击“发送测试邮件”按钮。如果一切顺利，你将收到邮件。
7. 结论
通过本教程，你已经学会了如何使用 **Next.js ** 和 Gmail 构建一个简单而专业的邮件系统。使用 Nodemailer 与 Gmail 集成，使得邮件发送变得更加简单高效。你可以根据需要添加更多的邮件模板、实现不同的邮件发送场景。
评论(0)