大多数网站都有一个联系页面，您可以在其中发送消息以联系所有者。 它们看起来像这样：

在本文中，我们将在 Next.js 中使用 React 创建一个类似的表单。 首先，我将创建一个带有表单的前端部分，然后我将构建一个 API 路由，将表单发送到您的电子邮件。

设置应用程序

首先，让我们创建一个新的 Next.js 项目。 我们将在启用 JavaScript 和 ESLint 的 contact-form 文件夹中创建它：

npx create-next-app contact-form --js --eslint

这将创建文件夹并安装所有依赖项。

现在进入文件夹（cd contact-form）并启动开发服务器：

npm run dev

访问 查看正在运行的应用程序。

创建表单

我们要进行更改的主要文件是 pages/index.js。 删除文件中的原始代码并粘贴以下代码：

import React from 'react';export default function Home() {  return (    <form className="container">      <h1>Get in touch</h1>      <div className="email block">        <label htmlFor="frm-email">Email</label>        <input          id="frm-email"          type="email"          name="email"          autoComplete="email"          required        />      </div>      <div className="block phone">        <label htmlFor="frm-phone">Phone</label>        <input          id="frm-phone"          type="text"          name="phone"          autoComplete="tel"          required        />      </div>      <div className="name block">        <div>          <label htmlFor="frm-first">First Name</label>          <input            id="frm-first"            type="text"            name="first"            autoComplete="given-name"            required          />        </div>        <div>          <label htmlFor="frm-last">Last Name</label>          <input            id="frm-last"            type="text"            name="last"            autoComplete="family-name"            required          />        </div>      </div>      <div className="message block">        <label htmlFor="frm-message">Message</label>        <textarea id="frm-message" rows="6" name="message"></textarea>      </div>      <div className="button block">        <button type="submit">Submit</button>      </div>    </form>  );}

此代码创建一个包含以下字段的表单：

电子邮件

名

姓

电话号码

信息

除消息外，所有字段都是必需的。

要向表单添加样式，请将 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 div {  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 (    <form className="container" onSubmit={handleSubmit}>      <h1>Get in touch</h1>      <div className="email block">        <label htmlFor="frm-email">Email</label>        <input          id="frm-email"          type="email"          name="email"          autoComplete="email"          required        />      </div>      <div className="block phone">        <label htmlFor="frm-phone">Phone</label>        <input          id="frm-phone"          type="text"          name="phone"          autoComplete="tel"          required        />      </div>      <div className="name block">        <div>          <label htmlFor="frm-first">First Name</label>          <input            id="frm-first"            type="text"            name="first"            autoComplete="given-name"            required          />        </div>        <div>          <label htmlFor="frm-last">Last Name</label>          <input            id="frm-last"            type="text"            name="last"            autoComplete="family-name"            required          />        </div>      </div>      <div className="message block">        <label htmlFor="frm-message">Message</label>        <textarea id="frm-message" rows="6" name="message"></textarea>      </div>      <div className="button block">        <button type="submit">Submit</button>      </div>    </form>  );}

现在，当您尝试提交表单时，您应该会在开发人员控制台中看到 FormData。

向 API 提交表单

我们将使用 [fetch]() 将表单数据提交给 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 (    <form className="container" onSubmit={handleSubmit}>      <h1>Get in touch</h1>      <div className="email block">        <label htmlFor="frm-email">Email</label>        <input          id="frm-email"          type="email"          name="email"          autoComplete="email"          required        />      </div>      <div className="block phone">        <label htmlFor="frm-phone">Phone</label>        <input          id="frm-phone"          type="tel"          name="phone"          autoComplete="tel"          required        />      </div>      <div className="name block">        <div>          <label htmlFor="frm-first">First Name</label>          <input            id="frm-first"            type="text"            name="first"            autoComplete="given-name"            required          />        </div>        <div>          <label htmlFor="frm-last">Last Name</label>          <input            id="frm-last"            type="text"            name="last"            autoComplete="family-name"            required          />        </div>      </div>      <div className="message block">        <label htmlFor="frm-message">Message</label>        <textarea id="frm-message" rows="6" name="message"></textarea>      </div>      <div className="button block">        <button type="submit">Submit</button>      </div>    </form>  );}

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 keySENDGRID_API_KEY=SG.abcdef...

我们的应用程序已准备就绪。 使用 npm run dev 运行（或重启）开发服务器并尝试提交表单！

结论

我们已经学习了如何在 Next.js 中创建表单，使用 FormData 提交表单并获取，在 API 路由中处理提交并通过电子邮件发送。

进一步可能的改进包括添加 CAPTCHA 或蜜罐字段以防止垃圾邮件提交，通过检查电话和电子邮件地址改进表单数据验证，将提交格式化为 HTML，或在提交时向用户提供更好的反馈。

除了发送电子邮件，我们还可以通过提交做更多的事情，比如将数据发送到 CRM 或 Slack，或者处理时事通讯订阅。 但那是另一次——关注我们的个人资料或注册我们的每月时事通讯，这样您就不会错过我们以后的教程。