在构建 Web 应用程序时，电子邮件是一个重要的功能，可以让您的应用程序与用户进行交互和通信。在本文中，我们将介绍如何使用 Next.js 框架来发送电子邮件。
准备工作
在开始之前，确保您已经安装了最新版本的 Node.js 和 npm。然后，使用以下命令创建一个新的 Next.js 应用程序：
--- --------------- ------ -- ------ --- ------- ----------
这将创建一个名为 my-app 的新 Next.js 应用程序，并将 nodemailer 包安装到您的项目中。
配置邮件发送
要发送电子邮件，我们需要使用 nodemailer 包。nodemailer 是一个 Node.js 库，可用于发送邮件。在我们的 Next.js 应用程序中，我们将使用 nodemailer 来发送电子邮件。
首先，创建一个名为 config.js 的新文件，并将以下内容添加到该文件中：
-------------- - -
------ -
-------- --------
----- -
----- -----------------------
----- ----------------------
-
-
--在上面的代码中，我们定义了一个名为 email 的对象，其中包含我们要使用的邮件服务（这里我们使用了 Gmail）。我们还定义了一个名为 auth 的对象，其中包含我们的电子邮件地址和密码。为了保护我们的密码，我们将其存储在环境变量中，并在后面的步骤中使用。
现在，我们需要设置我们的 Gmail 帐户，以允许我们的应用程序发送电子邮件。如果您使用的是不同的邮件服务，请根据该服务的文档进行设置。
要设置 Gmail 帐户，请转到此链接并启用“Less Secure App Access”。
编写发送电子邮件代码
现在，我们已经配置了我们的电子邮件服务，让我们编写代码来发送电子邮件。
在我们的 Next.js 应用程序中创建一个名为 sendEmail.js 的新文件，并将以下内容添加到该文件中：
----- ---------- - ----------------------
----- ------ - --------------------
----- ----------- - -----------------------------------------
----- --------- - ----- --------- -- -
--- -
----- ------------------------------
------------------ ------------ ---- -- -----------------
- ----- ------- -
--------------------- -- ---- ------ -----------
-
--
-------------- - ----------我们首先导入 nodemailer 和我们之前定义的 config，然后使用 config.email 创建一个新的邮件传输器。然后，我们定义了一个名为 sendEmail 的函数，该函数将电子邮件消息作为参数，并使用 nodemailer 的 sendMail 方法发送电子邮件。如果发送成功，我们会在控制台上打印消息，否则我们将记录错误。
发送电子邮件示例
现在，我们已经编写了发送电子邮件的代码，让我们创建一个示例来演示如何使用它。
在我们的 Next.js 应用程序中创建一个名为 pages/index.js 的新文件，并将以下内容添加到该文件中：
------ ------ - -------- - ---- --------
------ --------- ---- ---------------
----- ----------- - -- -- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
----- --------- ----------- - -------------
----- ------------ - --- -- -
-------------------
----- ----------- - -
----- ------
--- -----------------------
-------- --------
----- -------
--
-----------------------
--
------ -
----- ------------------------
-------
------
------ ------------ ------------- ------------- -- ------------------------- --
--------
--- --
-------
--------
------ ----------- --------------- ------------- -- --------------------------- --
--------
--- --
-------
--------
--------- --------------- ------------- -- --------------------------- --
--------
--- --
------- ------------------ --------------
-------
--
--
------ ------- -------- ------ -
------ -
-----
----------- -- -- ------- ---------
------------ --
------
--
-在上面的代码中，我们首先导入我们之前编写的 sendEmail 函数。然后，我们创建一个名为 ContactForm 的组件，其中包含电子邮件消息的表单。当用户提交表单时，我们将该消息作为参数传递给 sendEmail 函数，从而发送电子邮件。
请注意，在上面的代码中，我们未直接将密码传递给 sendEmail 函数。相反，我们将其存储在环境变量中，并在我们的 config.js 文件中使用。为了设置环境变量，请在根目录中创建一个名为 .env.local 的新文件，并将以下内容添加到该文件中：
------------------------------ -----------------------
请确认您已将 "youremail" 和 "yourpassword" 替换为您的 Gmail 电子邮件地址和密码。
结论
在本文中，我们学习了如何使用 Next.js 发送电子邮件。我们使用 nodemailer 包和 Gmail 服务来发送电子邮件，并创建了一个使用 sendEmail 函数的示例代码。我们还讨论了如何安全地存储我们的电子邮件密码，并使用环境变量引用该密码。
希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67090c8ed91dce0dc8760a35