让我们用Next。js构建一个联系表单

　　大多数网站都有一个联系页面，您可以在其中发送消息以联系所有者。 它们看起来像这样：
　　在本文中，我们将在 Next.js 中使用 React 创建一个类似的表单。 首先，我将创建一个带有表单的前端部分，然后我将构建一个 API 路由，将表单发送到您的电子邮件。
　　设置应用程序
　　首先，让我们创建一个新的 Next.js 项目。 我们将在启用 JavaScript 和 ESLint 的 contact-form 文件夹中创建它：npx create-next-app contact-form --js --eslint
　　这将创建文件夹并安装所有依赖项。
　　现在进入文件夹（cd contact-form）并启动开发服务器：npm run dev
　　访问 http://localhost:3000 查看正在运行的应用程序。
　　创建表单
　　我们要进行更改的主要文件是 pages/index.js。 删除文件中的原始代码并粘贴以下代码：import React from ＂react＂;  export default function Home() {   return (        ); }
　　此代码创建一个包含以下字段的表单：
　　电子邮件
　　名
　　姓
　　电话号码
　　信息
　　除消息外，所有字段都是必需的。
　　要向表单添加样式，请将 styles/globals.css 文件的内容替换为以下代码：html, body {   padding: 0;   margin: 0;   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu,     Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;   background: #1e1e1e;   min-height: 100vh;   display: flex;   color: rgb(243, 241, 239);   justify-content: center;   align-items: center; }  .block {   display: flex;   flex-direction: column; }  .name {   display: flex;   flex-direction: row;   justify-content: space-between; }  .container {   font-size: 1.3rem;   border-radius: 10px;   width: 85%;   padding: 50px;   box-shadow: 0 54px 55px rgb(78 78 78 / 25%), 0 -12px 30px rgb(78 78 78 / 25%),     0 4px 6px rgb(78 78 78 / 25%), 0 12px 13px rgb(78 78 78 / 25%),     0 -3px 5px rgb(78 78 78 / 25%); }  .container input {   font-size: 1.2rem;   margin: 10px 0 10px 0px;   border-color: rgb(31, 28, 28);   padding: 10px;   border-radius: 5px;   background-color: #e8f0fe; }  .container textarea {   margin: 10px 0 10px 0px;   padding: 5px;   border-color: rgb(31, 28, 28);   border-radius: 5px;   background-color: #e8f0fe;   font-size: 20px; }  .container h1 {   text-align: center;   font-weight: 600; }  .name p {   display: flex;   flex-direction: column; }  .block button {   padding: 10px;   font-size: 20px;   width: 30%;   border: 3px solid black;   border-radius: 5px; }  .button {   display: flex;   align-items: center; }  textarea {   resize: none; }
　　我们的表单应该看起来像这样：
　　现在我们需要找到一种方法来存储用户输入的输入。 我将使用当前所有浏览器都原生支持的 FormData。 它从表单加载字段，然后将它们提交给服务器。
　　在 pages/index.js 文件中，粘贴以下代码（注意新的 handleSubmit 函数）：import React from ＂react＂;  export default function Home() {   async function handleSubmit(e) {     e.preventDefault();     const data = new FormData(e.currentTarget);     console.log(data);   }    return (        ); }
　　现在，当您尝试提交表单时，您应该会在开发人员控制台中看到 FormData。
　　向 API 提交表单
　　我们将使用 [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 将表单数据提交给 API——不需要额外的依赖。
　　表单提交逻辑转到 handleSubmit 函数。 以下是 pages/index.js 中的完整代码：import React from ＂react＂;  export default function Home() {   async function handleSubmit(e) {     e.preventDefault();     const data = new FormData(e.currentTarget);     try {       const response = await fetch(＂/api/contact＂, {         method: ＂post＂,         body: new URLSearchParams(data),       });       if (!response.ok) {         throw new Error(`Invalid response: ${response.status}`);       }       alert(＂Thanks for contacting us, we will get back to you soon!＂);     } catch (err) {       console.error(err);       alert(＂We can＂t submit the form, try again later?＂);     }   }    return (        ); }
　　handleSubmit 将 POST 请求中的数据发送到 /api/contact 路由。 我们还将 FormData 对象包装在 URLSearchParams 中，以将数据作为 application/x-www-form-urlencoded 发送，该数据由 Next.js API 路由处理程序自动解码。
　　在 API 路由中处理表单提交
　　现在我们需要处理服务器上的表单提交。 我们将为此使用 Next.js API 路由。 API 路由位于 pages/api 文件夹中。 让我们创建对应于 API 路由 /api/contact 的 pages/api/contact.js 文件。
　　首先在 pages/api/contact.js 文件中粘贴以下代码来测试我们是否在服务器上接收到数据。export default function handler(req, res) {   console.log(req.body);   res.send(200); }
　　现在尝试提交表单，您应该会看到终端上记录的数据。 现在我们进入了有趣的部分。
　　使用 SendGrid 和 Superface 发送电子邮件
　　当用户提交联系表时，我们希望将提交的信息发送给网站所有者。 首先，我们需要选择一些电子邮件提供商并研究他们的 API 和 SDK。 或者我们可以将 Superface 与任何提供商一起使用。
　　Superface 使 API 集成变得超级简单。 我们不必处理 API 文档，我可以在同一接口后面使用许多提供程序。 此外，我可以使用 Superface 目录中更多现成的 API 用例。 这是一个值得在您的工具箱中拥有的工具。
　　设置发送网格
　　我将使用 SendGrid 作为 Superface 的电子邮件提供商。 创建您的帐户，获取具有完全访问权限的 API 密钥并验证单一发件人验证。
　　在 Superface 端，选择用例，即：发送电子邮件。
　　从 API 路由发送电子邮件
　　Superface 用例与 OneSDK 一起使用，因此我们必须安装它。npm i @superfaceai/one-sdk
　　在发送电子邮件用例的 Superface 上，选择 sendgrid 作为提供者。 我们可以在 API 路由处理程序中使用示例中的大部分代码，我们只需要从请求中正确传递数据即可。
　　将以下代码粘贴到您的 pages/api/contact.js 文件中：const { SuperfaceClient } = require(＂@superfaceai/one-sdk＂);  const sdk = new SuperfaceClient();  //只需检查是否提供了所有必填字段 function formValid(body) {   return body.email && body.phone && body.first && body.last; }  export default async function handler(req, res) {   const body = req.body;    if (!formValid(body)) {     res.status(422).end();     return;   }    const profile = await sdk.getProfile(＂communication/send-email@2.1.0＂);   const message = `     Email: ${body.email}     Phone: ${body.phone}     Name: ${body.first} ${body.last}     Message: ${body.message}      `;   const result = await profile.getUseCase(＂SendEmail＂).perform(     {       from: process.env.FROM_EMAIL,       to: process.env.TO_EMAIL,       subject: ＂Message from contact form＂,       text: message,     },     {       provider: ＂sendgrid＂,       security: {         bearer_token: {           token: process.env.SENDGRID_API_KEY,         },       },     }   );    try {     const data = result.unwrap();     console.log(data);     res.status(201).end();   } catch (error) {     console.error(error);     res.status(500).end();   } }
　　您会注意到我们在代码中引用了一些环境变量（例如 process.env.SENDGRID_TOKEN）。 我们可以将这些存储在 .env 文件中。 在项目的根目录中，创建一个包含以下内容的 .env.local 文件（确保编辑值）：# 在单一发件人验证中验证的电子邮件地址 FROM_EMAIL=from@example.com # 您要将提交内容发送到的电子邮件地址 TO_EMAIL=to@example.com # Sendgrid API key SENDGRID_API_KEY=SG.abcdef...
　　我们的应用程序已准备就绪。 使用 npm run dev 运行（或重启）开发服务器并尝试提交表单！
　　结论
　　我们已经学习了如何在 Next.js 中创建表单，使用 FormData 提交表单并获取，在 API 路由中处理提交并通过电子邮件发送。
　　进一步可能的改进包括添加 CAPTCHA 或蜜罐字段以防止垃圾邮件提交，通过检查电话和电子邮件地址改进表单数据验证，将提交格式化为 HTML，或在提交时向用户提供更好的反馈。
　　除了发送电子邮件，我们还可以通过提交做更多的事情，比如将数据发送到 CRM 或 Slack，或者处理时事通讯订阅。 但那是另一次——关注我们的个人资料或注册我们的每月时事通讯，这样您就不会错过我们以后的教程。