用 Bolt.new 快速搭建一个带数据库的 SaaS 落地页踩坑记录

Bolt.new 这类全栈 AI 生成工具最诱人的地方在于它能直接在浏览器里跑 Node 运行时，但如果你想把生成的 Demo 变成一个真正带数据库、能接支付的 SaaS 落地页，最容易卡死在“环境同步”和“数据库权限”这两个坑里。

我这次尝试用它快速起一个 AI 写作工具的落地页，核心路径是 Bolt.new → Supabase → Netlify。

1. 数据库连接的正确姿势
很多人直接在 Prompt 里说“帮我接个数据库”，结果它给你写了一堆本地 SQLite 的代码，部署到云端直接 500 错误。正确做法是先去 Supabase 开个项目，把 Project URL 和 Anon Key 拿到手，然后直接在 Bolt 的聊天框里喂给它：

请将数据库迁移至 Supabase。这是我的连接信息：
URL: https://xxxx.supabase.co
Key: eyJhbG...
请重新编写 db.ts 配置文件，并确保使用 @supabase/supabase-js 客户端。

2. 避坑：环境变量的“隐形失效”
Bolt.new 在预览环境下能跑通，但当你点击 Deploy 到 Netlify 或 Vercel 时，经常发现数据库连不上。原因是 Bolt 生成的 .env.example 并不等于部署平台的 Environment Variables。

操作技巧： 部署后必须手动在 Netlify 的 Site Settings → Environment variables 里添加对应的键值对。千万别指望 AI 能帮你自动完成云端的配置映射。

3. 解决类型定义报错
在快速迭代时，AI 经常会修改数据库表结构，但 TypeScript 的类型定义没更新，导致编辑器满屏红线。我习惯用这个命令强行同步：

# 在 Bolt 的终端里运行，强制更新类型
npx supabase gen types typescript --project-id your-project-id > src/types/supabase.ts

4. 效率提升：Prompt 策略
不要一次性让它写整个落地页，那样生成的组件极其简陋。我采用的拆分逻辑是：

• 第一步： 定义 UI 规范（例如：使用 Tailwind CSS，深色模式，参考 Linear 的极简风）。
• 第二步： 搭建静态页面（Hero Section → Feature Grid → Pricing）。
• 第三步： 注入交互逻辑（连接 Supabase 表单收集 Email）。

总结一个实战配置链路：

• UI 框架： Tailwind + Lucide React (图标库)
• 后端： Supabase (Auth + Database)
• 部署： Netlify
• 关键点： 必须在 Prompt 中明确要求使用 Client-side fetching 避免复杂的 SSR 配置导致部署失败。

最深刻的教训是：AI 生成的代码在 80% 的时间里是完美的，但剩下的 20% 往往在异步请求的竞态条件（Race Condition）上。如果页面加载时出现闪烁或数据加载失败，记得检查 useEffect 的依赖项，那里是 AI 最容易写错的地方。