一个 Next.js 等待名单表单，为什么让设计控开发者集体破防

大多数 SaaS 的等待名单，居然还停留在 Google Form。Ras Mic 在这支视频里做了一件很“反叛”的事：用 Next.js 原生方式，在十几分钟内搭出一个好看、可扩展、还能接 AI 工作流的等待名单系统。这不是教程，而是一种审美和效率的宣言。

最反直觉的一点：问题从来不在“能不能用”，而在“配不配”

视频一开头，Ras Mic 就戳中了无数开发者的痛点：我们明明在用 Next.js、React 19、最新的前端栈，却还在用 Google Form 收集用户邮箱。这件事“能用”，但一点都不“配”。

他点名了行业里的普遍现状：即使是有收入的 SaaS，也常常把最关键的入口——等待名单、联系表单、线索收集——外包给第三方嵌入式表单。结果是：样式割裂、体验突兀、数据链路不透明。

这背后其实是一个被忽视的事实：表单不是边角料，而是增长系统的第一行代码。Ras Mic 作为一个“设计优先”的开发者，直言这件事“很伤人”，也正是这种不满，才引出了后面的解决方案。

真正的爽点：Next.js 原生 + 开源 + 自托管

Ras Mic 介绍的方案来自两位 Next.js 开发者 Cameron 和 Bridger 搭建的 Router（视频中的核心工具）。它的定位非常清晰：不是再造一个 Typeform，而是让表单成为 Next.js 应用的一部分。

实操过程本身就很有“现代感”：
- 一个 npx 命令，直接生成等待名单路由
- 标准的 Next.js 结构：page.tsx、form.tsx、action.ts、schema.ts
- 使用 Zod 做 schema 校验
- 用的是 Next.js 15 的 useActionState、useTransition，以及 shadcn/ui 的 Form 组件

这里有一个很容易被忽略但极其关键的点：表单提交逻辑不再是“前端调接口”，而是 Server Action 原生处理。这意味着类型安全、状态管理和错误处理，都和你的应用在同一个语义层级上。

对 AI 从业者来说，这种“原生一致性”非常重要——因为你后面几乎一定会把这些数据送进别的系统，而不是只存一个邮箱。

真正拉开差距的，是 Webhook 这一小步

如果说前半段只是“好看又顺手”，那 Webhook 才是让这套方案开始“值钱”的地方。

Ras Mic 演示了一个非常真实的场景：
- 在 Router 后台创建一个 endpoint
- 只收集 email
- 拿到 endpoint URL 和 API Key，填进 Next.js 的 action.ts

到这里，其实已经比 Google Form 强很多了：你能看到实时提交、导出 CSV、接 Mailchimp。

但他没有停在这里，而是继续加了一个 Webhook：
- 本地新建 /api/webhook/route.ts
- 接收 POST 请求
- 打印 request body
- 用 ngrok 暴露本地端口

当新的邮箱提交进来，数据会同时：
1. 存在 Router 的 leads 里
2. 推送到你自己的 API

这一刻，等待名单就从“收集邮箱”，升级成了“事件触发器”。你完全可以在这里接 Zapier、跑自动化、甚至直接喂给 AI agent 去打标签、分群、评分。

最后一击：让 AI 负责“变好看”，人负责“变聪明”

视频最后一个细节，很多人可能会一带而过，但其实非常有时代意味。

Ras Mic 打开 Windsurf，对 AI 说了一句话：“Make the waitlist form and page pretty.” 然后直接把整个等待名单页面丢给 AI。

结果是：
- 表单结构没变
- 逻辑一行没动
- 但 UI 立刻变成一个“像样的产品页面”

这背后隐含的工作流变化非常明显：
- 人负责系统设计、数据流、边界条件
- AI 负责样式、美感、微调

这恰恰是当前 AI 应用开发最现实、也最高效的分工方式。不是让 AI“写一切”，而是让它在你已经搭好的轨道上跑得更快。

总结

这支视频表面是在教你“怎么做一个等待名单表单”，但真正传递的信息只有一个：别再把增长入口当成临时拼凑的东西。对 AI 从业者来说，一个邮箱背后，可能是数据、反馈、训练样本、付费用户，甚至是下一次产品方向的信号。

如果你正在做 SaaS、AI 工具，或者任何需要用户早期反馈的产品，现在就该做三件事：把表单拉回到你的代码里；用 Webhook 把它接进真实工作流；把重复、审美层面的工作交给 AI。等你下次和朋友聊起产品增长时，你会发现自己不只是“会用工具”，而是真的在搭系统。

关键词： Next.js， 等待名单， SaaS增长， Webhook， AI应用

事实核查备注： 需要核查：1）视频发布时间为 2025-01-22；2）作者/频道为 Ras Mic；3）工具名称为 Router（视频中展示的表单解决方案）；4）使用的 Next.js 版本提及为 Next.js 15、React 19；5）涉及的第三方工具包括 shadcn/ui、Zod、ngrok。