进阶方向
你现在已经能做出一个完整的、有域名的、能更新的产品官网。如果你还想再进一步——加表单后端、接数据库、做用户登录、真正长成一个 SaaS——这一章给你方向和起步资源。
11.1 从一页扩到多页
一页官网适合验证想法,但如果你想把项目讲完整,迟早会遇到“这一页塞不下”的问题。
最常见的扩展是这几页:
- About:讲你是谁、为什么做这个项目。
- FAQ:把用户反复问的问题集中回答。
- Blog:写教程、案例、更新记录,顺便做 SEO。
- Pricing:如果你已经开始收费,单独讲价格和套餐。
- Contact:放邮箱、表单、社交账号或预约链接。
纯静态站不需要复杂路由。你可以直接建多个 HTML 文件,比如 about.html、faq.html、blog.html,导航栏里互相链接就行。等页面很多了,再考虑 Next.js、Astro 这类框架。
11.2 让表单真的能收到邮箱
前面做的表单大概率只是“长得像能提交”。真正要收到邮箱,需要一个地方帮你接住表单数据。
新手可以按复杂度这样选:
| 方式 | 适合谁 | 你要做什么 |
|---|---|---|
| Tally | 想最快收到反馈,不想写后端 | 建一个表单,把链接或嵌入代码放到网站里 |
| Formspree | 想保留自己页面里的原生表单 | 注册后拿到 endpoint,把 form action 指向它 |
| Resend | 已经有一点后端,想自己发邮件 | 写一个 API 接口,用密钥发邮件 |
价格和免费额度会变,动手前一定打开官网确认。学习阶段别急着绑信用卡,先用能免费试的方案把流程跑通。
11.3 接入数据库:Supabase 入门
数据库听起来很吓人,其实它就是“有结构的表格”。如果你的项目开始需要保存数据,比如留言、订单、用户收藏、报名记录,就要考虑数据库了。
Supabase 常被新手用来起步,因为它把数据库、登录、接口和后台管理界面打包在一起。你可以先在网页后台建表,不用一开始就学复杂数据库命令。
最小学习路径是:
- 建一个 Supabase 项目。
- 建一张表,比如
leads。 - 表里放
name、email、message、created_at。 - 拿到项目 URL 和公开 anon key。
- 让前端把表单数据写入这张表。
11.4 加上用户登录
登录系统不是每个项目都需要。只有当你要做“每个用户看到自己的东西”时,才值得加登录。
比如:
- 用户能保存自己的收藏。
- 用户能管理自己的订单或资料。
- 用户登录后看到会员内容。
- 管理员和普通用户权限不同。
如果你只是一个介绍页、预约页、作品集,先别加登录。登录会带来密码找回、邮件验证、隐私合规、权限判断这些后续工作。
| 方案 | 适合场景 | 一句话判断 |
|---|---|---|
| Supabase Auth | 你已经用 Supabase 做数据库 | 少接一个服务,后台统一 |
| Clerk | 你想要更完整的登录 UI 和用户管理 | 体验好,但要确认免费额度和品牌露出 |
11.5 给产品加上 AI 能力
等你的网页能展示、能收集、能保存之后,可以考虑加 AI 功能。最小的 AI 功能不一定是聊天机器人,反而可能是一个很小的按钮。
比如:
- 把用户输入的一段话总结成三条要点。
- 把客服留言改写得更礼貌。
- 把一段中文翻译成英文。
- 根据用户选项生成一份建议清单。
- 给管理员自动归类反馈。
这里要记住一个硬规则:API Key 不要放在浏览器前端。AI API 通常要走后端接口,由后端保存密钥,前端只调用你自己的接口。
11.6 走向 SaaS 的下一步
SaaS 不是“有登录、有数据库、有付款”就算完成。真正的 SaaS 是:有人持续用,你持续维护,它持续解决一个具体问题。
如果你要往 SaaS 走,通常会慢慢补这几块:
| 模块 | 常见工具 | 先做到什么程度 |
|---|---|---|
| 付费 | Stripe Payment Links / Checkout / Billing | 先做一次性支付或一个最简单订阅 |
| 邮件 | Resend / Buttondown / ConvertKit | 先发欢迎邮件和重要通知 |
| 客服 | 邮箱 / Tally / Crisp / Intercom | 先让用户能找到你 |
| 后台 | Supabase Dashboard / 自建 Admin 页 | 先能看订单、留言、用户列表 |
| 日志 | Vercel Logs / Sentry | 先知道哪里报错 |
收费功能尤其要慢一点。支付涉及税务、退款、隐私和服务条款,不是只接个按钮。最稳的顺序是:先手动收款验证需求,再接 Stripe 这类正式支付工具。
11.7 推荐资源
学到这里,你已经不适合再“从零教程”里打转了。下一步应该按问题找资源。
- 想继续做网页:学 HTML、CSS、JavaScript 的基础语法,但边做边学,不要先啃完整教材。
- 想做数据库和登录:看 Supabase 官方文档里的 quickstart,跟着做一个最小表单。
- 想做 AI 功能:看 OpenAI 官方 API 文档,先跑通一个后端接口,再接到网页。
- 想做付费:看 Stripe Checkout 或 Payment Links,先理解支付流程和测试模式。
- 想提升审美:多看真实产品官网,让 Codex 拆解“它为什么好看”。
最推荐的学习方式不是收藏 100 个链接,而是保留一个“问题清单”。每次卡住,把问题写成一句人话,让 Codex 帮你把它拆成关键词、官方文档入口和最小实验。
- 从多页、表单、数据库、登录、AI、付费里选一个方向。
- 用本章对应的提示词让 Codex 给你三种方案。
- 只选最小方案,不要选“最完整”的。
- 让 Codex 列出会改哪些文件和你需要准备哪些账号。