要在 2026 年用 Next.js 构建测验应用，需要将问题建模为数据，在一个小型客户端组件中渲染它们，该组件在 React 状态中跟踪答案和分数，在提交时计算结果，如果想捕获潜在客户，可以将响应持久化到 Supabase 这样的数据库。保持页面本身为服务器组件，只将交互部分推送到客户端。这就是整个架构，比表单 SaaS 更快更便宜。Supabase if you want to capture leads. Keep the page itself a server component and push only the interactive part to the client. That is the whole architecture, and it is faster and cheaper than a form SaaS.
关键要点：保持页面为服务器组件，将交互性推送到一个小型客户端岛屿，将问题存储为数据，在状态中跟踪分数，并将结果和电子邮件持久化到 Supabase。你会得到一个快速、可嵌入、用于捕获潜在客户的测验，没有按响应计费。Keep the page a server component, push interactivity to a small client island, store questions as data, track score in state, and persist results and emails to Supabase. You get a fast, embeddable, lead-capturing quiz with no per-response fees.
Typeform 和 Jotform 这样的工具很好用，直到你想要完整的品牌塑造、没有按响应限制，以及拥有数据和潜在客户。对于核心营销的测验，自己构建通常是更好的选择。以下是我的构建方式。
为什么要自己构建
三个原因：控制、成本和数据。你会得到一个看起来完全符合你品牌的测验，你避免了月度响应上限和按席位计费，每一个答案和电子邮件都进入你自己的数据库，你可以在那里对潜在客户进行评分并触发后续行动。代价是一两天的构建时间，而不是在 SaaS 中拖动字段。
将问题建模为数据
将测验定义为一个纯数据结构：一个问题数组，每个问题包含选项和得分或结果权重。保持问题为数据而非标记，意味着你可以在不触及渲染代码的情况下添加、重新排序或 A/B 测试它们，以后还可以将其移到 CMS 或数据库中，让非开发人员编辑。
架构：服务器外壳、客户端岛屿
在 App Router 中，将路由保持为服务器组件，渲染页面外壳、SEO 标签和首次绘制。将交互式测验放在一个客户端组件（一个 use-client 岛屿）中，该组件在 React 状态中保存当前问题、运行中的得分和答案。这样可以保持 JavaScript 包很小，页面很快，这很重要，因为测验经常被分享并带来冷启动流量。App Router, keep the route a server component that renders the page shell, SEO tags, and the first paint. Put the interactive quiz in a single client component (a use-client island) that holds the current question, the running score, and the answers in React state. This keeps the JavaScript bundle small and the page fast, which matters because quizzes are often shared and land cold traffic.
捕获结果和潜在客户
提交时，根据得分计算结果，显示结果，并将响应写入数据库。使用 Supabase，你可以在一次服务器操作或路由处理程序调用中插入答案和潜在客户（如果你在电子邮件后面限制结果）。现在测验不仅是参与度；它是一个你拥有的潜在客户捕获机器，没有导出限制。server action or route handler. Now the quiz is not just engagement; it is a lead-capture machine you own, with no export limits.
使其可分享
为每个结果赋予一个稳定的 URL 和一个动态开放图协议图像，以便分享的链接预览结果。产生可分享结果页面的测验本身就是一个分发渠道，这是营销测验的全部要点，也是大多数表单工具做得很差的地方。dynamic Open Graph image so shared links preview the outcome. A quiz that produces a shareable result page is its own distribution channel, which is the entire point of marketing quizzes and something most form tools do poorly.
部署和性能
静态渲染外壳，在边缘或客户端运行小型客户端岛屿，测验在任何地方都能快速加载。由于繁重的工作主要是数据加上少量状态，不需要扩展的服务器，也不需要按响应付费，只需要你的常规主机服务。
何时选择 SaaS 而不是自建
如果你需要在今天下午推出测验，或非技术人员需要定期构建和编辑测验，Tally 或 Jotform 这样的工具是务实之选。当测验是核心的、品牌化的、高流量资产，且拥有数据和体验值得投入工程资源时，用 Next.js 构建它。
常见问题
用 Next.js 构建测验需要后端吗？
测验逻辑不需要，它在客户端运行。你只需要后端来存储响应或获取线索，Supabase 这样的托管数据库可以做到这一点，无需运行自己的服务器。
我如何存储测验响应？
在提交时将它们写入数据库，通过 Next.js 服务器操作或路由处理程序。Supabase 或任何 Postgres 都可以；插入答案和计算结果，加上电子邮件（如果你收集了的话）。
我如何从测验中获取线索？
在结果后面放置电子邮件字段门槛，然后将电子邮件与响应一起存储。因为你拥有数据库，每个线索都是你的，可以评分和跟进，没有表单 SaaS 可能施加的导出限制。
Next.js 还是 Typeform 用于测验？
Typeform 用于快速且无需技术编辑；当你想要完整品牌定制、没有按响应计费、可共享的结果页面以及拥有数据所有权时，选择 Next.js。对于核心营销测验，Next.js 构建通常是赢家。如果你想让我来构建，这正是我构建的那类项目。exactly the kind of thing I build.
相关：无代码路线的 Typeform 替代品，以及用于存储响应的无服务器数据库目录。Typeform alternatives for the no-code route, and the serverless databases directory for where to store responses.