Next.JS 和 Nodemailer,从联系表单发送电子邮件

作者:编程家 分类: 编程代码 时间:2025-07-28

使用Next.JS和Nodemailer发送电子邮件的联系表单

Next.JS是一个基于React的服务器端渲染框架,它提供了一种简单而强大的方式来构建React应用程序。Nodemailer是一个Node.js的邮件发送库,它使我们能够通过代码发送电子邮件。

在这篇文章中,我将向你展示如何使用Next.JS和Nodemailer来创建一个联系表单,并通过电子邮件发送表单数据。

设置Next.JS项目

首先,我们需要创建一个Next.JS项目。在终端中运行以下命令:

npx create-next-app my-contact-form

这将创建一个名为my-contact-form的新项目。

接下来,我们需要安装一些必要的依赖项。在项目根目录下运行以下命令:

npm install nodemailer

这将安装Nodemailer库。

创建联系表单

现在我们可以开始创建联系表单。在pages目录下创建一个新的文件夹,并命名为contact。在contact文件夹中创建一个新的文件contact.js。

在contact.js文件中,我们将创建一个简单的联系表单。代码如下:

javascript

import React, { useState } from "react";

import axios from "axios";

const Contact = () => {

const [name, setName] = useState("");

const [email, setEmail] = useState("");

const [message, setMessage] = useState("");

const handleSubmit = async (e) => {

e.preventDefault();

try {

await axios.post("/api/send-email", { name, email, message });

alert("Email sent successfully!");

} catch (error) {

alert("Failed to send email. Please try again later.");

}

setName("");

setEmail("");

setMessage("");

};

return (

Contact Form




);

};

export default Contact;

在上面的代码中,我们首先导入了React和useState钩子。然后我们定义了三个状态变量name、email和message,分别用于存储用户输入的姓名、电子邮件和消息。

接下来,我们定义了一个handleSubmit函数,它将在用户提交表单时被调用。在这个函数中,我们使用axios库发送一个POST请求到/api/send-email路由,并将用户输入的姓名、电子邮件和消息作为请求的数据。

如果邮件发送成功,我们将弹出一个提示框显示“Email sent successfully!”;如果发送失败,我们将弹出一个提示框显示“Failed to send email. Please try again later.”。

最后,我们在return语句中渲染了一个包含表单元素的div。用户可以在输入框中输入姓名、电子邮件和消息,并点击“Send”按钮提交表单。

创建API路由

现在我们需要创建一个API路由来处理发送电子邮件的请求。在pages/api目录下创建一个新的文件send-email.js。

在send-email.js文件中,我们将使用Nodemailer库来发送电子邮件。代码如下:

javascript

import nodemailer from "nodemailer";

export default async function handler(req, res) {

const { name, email, message } = req.body;

try {

// 创建一个SMTP传输器

const transporter = nodemailer.createTransport({

host: "smtp.example.com",

port: 587,

secure: false, // true for 465, false for other ports

auth: {

user: "your-email@example.com", // 发送邮件的邮箱

pass: "your-email-password", // 发送邮件的邮箱密码

},

});

// 发送邮件

await transporter.sendMail({

from: "your-email@example.com", // 发件人邮箱

to: "recipient@example.com", // 收件人邮箱

subject: "New Contact Form Submission",

text: `

Name: ${name}

Email: ${email}

Message: ${message}

`,

});

res.status(200).end();

} catch (error) {

console.error(error);

res.status(500).end();

}

}

在上面的代码中,我们首先导入了nodemailer库。然后,在handler函数中,我们从req.body中解构出姓名、电子邮件和消息。

接下来,我们创建了一个SMTP传输器,用于连接到SMTP服务器并发送电子邮件。你需要将host、port、auth.user和auth.pass替换为你自己的SMTP服务器和邮箱凭据。

最后,我们使用transporter.sendMail方法发送电子邮件。邮件的发送者、收件者、主题和内容都在sendMail方法的参数中指定。

如果邮件发送成功,我们将返回状态码200;如果发送失败,我们将打印错误信息并返回状态码500。

在页面中引入联系表单

现在我们已经创建了联系表单和API路由,我们需要在页面中引入联系表单。

在pages/index.js文件中,我们将引入Contact组件,如下所示:

javascript

import Contact from "./contact/contact";

const HomePage = () => {

return (

Welcome to my website!

);

};

export default HomePage;

在上面的代码中,我们首先导入了Contact组件。然后,我们在return语句中渲染了一个包含欢迎信息和Contact组件的div。

现在,当用户访问主页时,他们将看到一个欢迎信息和联系表单。

在本文中,我们学习了如何使用Next.JS和Nodemailer创建一个联系表单,并通过电子邮件发送表单数据。

我们首先创建了一个Next.JS项目,并安装了Nodemailer库。然后,我们创建了一个联系表单,用户可以在表单中输入姓名、电子邮件和消息,并通过点击“Send”按钮提交表单。

接下来,我们创建了一个API路由,使用Nodemailer库发送电子邮件。我们连接到SMTP服务器,并使用用户输入的数据构建邮件内容。

最后,我们在主页上引入了联系表单,使用户能够在访问网站时填写表单。

希望本文能够帮助你使用Next.JS和Nodemailer发送电子邮件的联系表单。如果你有任何问题或疑问,请随时在下方留言。