每个 Next.js 项目最终都需要一个联系表单。
而最初的直觉通常是：
“我就写一个 API 路由，然后发一封邮件。”
这确实可行。
但这也本身就是一个完整的项目了。
你需要：
- 选择一个邮件服务商
- 管理 API 密钥
- 处理垃圾邮件
- 应对发送失败的情况
- 将提交的数据存储在某个地方
而这一切，都发生在你还没为实际产品写一行代码之前。
其实还有更简单的方法。
快速了解几种方案
当你搜索“Next.js 联系表单”时，通常会看到三种方法：
路由处理器 + 邮件 API（如 Resend、SendGrid 等）
完全掌控，但所有事情都得你自己负责。服务器操作（Server Actions）
开发体验更简洁，但你仍需自己处理邮件和垃圾信息。表单后端服务
将数据发送到一个托管的端点，它会帮你处理数据存储和邮件发送。
对于大多数项目，尤其是落地页、SaaS 网站和静态应用，第三种方案是最快捷的路径。
本指南将详细介绍这种方法。
最简单的版本：仅使用 HTML
如果你不需要加载状态或交互功能，完全可以使用一个纯 HTML 表单，完全不依赖 JavaScript：
<form action="https://formtorch.com/f/YOUR_FORM_ID" method="POST">
<input name="name" type="text" placeholder="您的姓名" required />
<input name="email" type="email" placeholder="您的邮箱" required />
<textarea name="message" placeholder="留言内容" required></textarea>
<button type="submit">发送消息</button>
</form>
这样就已经是一个可以正常工作的表单了。
浏览器会处理提交过程，提交完成后你会被重定向。
重定向到你自己的页面
<input
type="hidden"
name="_redirect"
value="https://yoursite.com/thank-you"
/>
对许多使用场景来说，这就已经足够了。
但 React 应用通常希望有更强的交互性。
一个真正的 React 联系表单
下面是一个具备加载状态、成功提示和错误处理的生产级组件：
"use client";
import { useState } 免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
