首页
Preview

使用Next.js和Gmail谷歌邮箱实现发送邮件教程

1. 前言

邮件是现代 Web 应用中不可或缺的一部分。无论是注册确认、订单通知,还是营销邮件,发送可靠的电子邮件至关重要。在本教程中,我们将使用 Next.jsGmail(谷歌邮箱) 来构建一个专业的邮件系统。我们将使用 Nodemailer 库与 Gmail 的 SMTP 服务器集成,发送邮件。

2. 配置 Gmail 帐户

要与 Gmail 的 SMTP 服务器集成,我们需要进行以下配置:

步骤 1:启用 Gmail 的 SMTP 服务

步骤 2:配置 Gmail 设置

  • 使用以下 SMTP 设置来发送邮件:
    • SMTP 服务器:smtp.gmail.com
    • SMTP 端口:465(SSL)或 587(TLS)
    • 用户名:你的 Gmail 地址(例如 your-email@gmail.com
    • 密码:你创建的应用专用密码

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 集成,使得邮件发送变得更加简单高效。你可以根据需要添加更多的邮件模板、实现不同的邮件发送场景。

资源

版权声明:本文内容由TeHub注册用户自发贡献,版权归原作者所有,TeHub社区不拥有其著作权,亦不承担相应法律责任。 如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

点赞(0)
收藏(0)
Hedy
大家好!我是一位前端开发工程师,拥有6年以上的前端开发经验。我熟练掌握HTML、CSS、JavaScript等语言,能够灵活运用各种前端框架,如Vue、React、Uniapp、Flutter等。我注重理论与实践相结合,能够为学员提供丰富的案例和实践项目,并以生动、易懂的语言为学员讲解前端开发的核心知识和技能。我不仅注重传授技能,更关注学员的职业发展,希望通过我的教学,帮助学员成为一名优秀的前端开发工程师。

评论(0)

添加评论