Bolt.new零基础教程：2026构建全栈应用完全指南

太长不看

Bolt.new 是 StackBlitz 推出的 AI 应用构建工具，让你在浏览器里直接生成完整的前后端 Web 应用——不需要本地安装环境、不需要处理依赖冲突、不需要配置部署。你用自然语言描述想要什么，Bolt 就生成完整的 React/Next.js 应用，带真实数据库、用户认证，一键部署上线。本教程带你从零构建一个真实可用的全栈应用：提示词技巧、Supabase 数据库集成、用户认证、部署上线。学完你会得到一个公网可访问的、完全在浏览器里建出来的全栈应用。

准备工作

• 一个现代浏览器（推荐 Chrome、Edge 或 Firefox）
• 一个 Bolt.new 账号（免费版即可；在 bolt.new 注册）
• 一个 Supabase 账号（免费版；在 supabase.com 注册）——用于数据库和用户认证
• 对 Web 应用有基本认知（前端、后端、数据库分别是什么）——不需要会写代码

第一步：注册 Bolt.new 并创建项目

打开 bolt.new，用 GitHub、Google 或邮箱注册。登录后进入仪表盘。

点击 "New Project" 按钮。你会看到一个提示词输入框——这是你描述应用的地方。本教程我们要构建一个个人任务管理器：用户可以注册登录、创建任务、标记完成、按状态筛选。

提示词输入框是 Bolt.new 最重要的部分。提示词的质量直接决定生成应用的质量。

第二步：写出有效的第一个提示词

Bolt.new 在接受结构化、详细的提示词时效果最好。模糊的提示词如"做个任务 app"只能得到粗糙的结果。结构化提示词才能生成接近生产可用的应用。

差提示词：

好提示词：

构建一个个人任务管理 Web 应用，包含以下功能：

1. 用户认证（注册/登录/退出），使用 Supabase Auth
2. 仪表盘以表格显示任务，列：任务名称、状态、优先级、创建日期
3. 用户可以创建新任务，包含：标题、描述、优先级（低/中/高）、截止日期
4. 用户可以编辑任务、标记为完成或删除
5. 按状态筛选任务（全部/进行中/已完成）
6. 深色模式 UI，现代简洁设计（Tailwind CSS）
7. 响应式布局，适配手机和桌面

使用 Next.js 14 App Router、Supabase 后端、Tailwind CSS 样式。

让生成结果更好的提示词技巧：

• 用列表写功能需求——Bolt 的 AI 对结构化列表的理解优于段落
• 明确指定技术栈——想要 Next.js、React 还是 Vue，直接说
• 描述 UI 风格——"现代深色主题""极简白""仪表盘布局"
• 覆盖边界情况——"没有任务时显示空状态""删除前确认"
• 包含数据关系——"每个任务属于一个用户，用户只能看到自己的任务"

把好提示词粘贴到输入框，按回车。Bolt 会开始生成应用。你会看到它搭建项目结构、通过 WebContainers（StackBlitz 的浏览器内 Node.js 运行时）安装依赖、编写组件文件、渲染实时预览——整个过程 60-120 秒。

第三步：接入 Supabase 实现数据库和认证

此时你的应用有界面了，但没有后端。预览中创建的数据刷新就没了。要持久化数据并加入用户认证，需要接入 Supabase。

3a. 创建 Supabase 项目：

打开 supabase.com，登录后点击 "New project"。起个名字（如"task-tracker"），设置安全的数据库密码，选择离用户最近的区域。等 1-2 分钟数据库初始化完成。

3b. 获取 Supabase 凭证：

在 Supabase 项目控制台，进入 Settings → API。需要两个值：

• Project URL（类似 https://xxxxxxxxxxxx.supabase.co）
• anon public key（以 eyJ... 开头）

3c. 在 Bolt.new 中连接 Supabase：

在 Bolt.new 中，点击屏幕顶部中央的齿轮图标（⚙️），然后在集成中点击 Supabase。点击 "Connect" 授权 Bolt 访问你的 Supabase 账号。选择刚刚创建的项目。

现在告诉 Bolt 集成 Supabase。在聊天面板中输入：

将这个应用接入 Supabase，使用我刚关联的项目 URL 和 anon key。

1. 创建 tasks 表，包含列：id（uuid，主键）、user_id（uuid，外键关联 auth.users）、title（文本）、description（文本）、priority（文本，枚举：Low/Medium/High）、status（文本，枚举：Active/Completed）、due_date（timestamptz）、created_at（timestamptz，默认 now()）
2. 对 tasks 表开启行级安全策略（RLS）
3. 创建 RLS 策略：用户只能增删改查自己的任务
4. 配置 Supabase Auth，使用邮箱/密码注册和登录
5. 更新所有前端组件，用真实 Supabase 数据替代模拟数据

Bolt 会生成 SQL 迁移脚本、创建 Supabase 客户端配置、更新 React 组件以获取真实数据。预览会自动刷新。

⚠️ 常见的 Supabase 集成坑： 如果 Bolt 显示"连接失败"或接入后应用白屏，最可能的原因是 Supabase 没有接收到建表语句。明确告诉 Bolt："在 Supabase SQL Editor 中运行 SQL 迁移脚本，创建 tasks 表。"Bolt 能输出原始 SQL，你可以手动粘贴到 Supabase SQL Editor 作为兜底方案。

第四步：测试认证和增删改查

Supabase 接入后，手动测试应用。在 Bolt 预览面板中：

1. 点击注册，用真实邮箱创建测试账号（Supabase 会发确认邮件；测试时可在 Supabase Auth 设置中关闭邮件确认）
2. 创建几个不同优先级的任务
3. 标记一个为完成、编辑另一个、删除一个
4. 退出后重新登录——确认数据还在
5. 尝试按"进行中"和"已完成"筛选

如果有任何问题，在聊天中告诉 Bolt："点击注册按钮没反应——检查认证流程。"Bolt 会读取代码、定位 bug 并修复。

第五步：部署应用

Bolt.new 支持一键部署。点击编辑器右上角的 "Deploy" 按钮。

Bolt 部署到 StackBlitz 的托管基础设施。首次部署需要 1-3 分钟。完成后你会得到一个公网 URL，如 https://task-tracker-abc123.bolt.new。

部署前检查清单：

• 所有 Supabase 环境变量已设置（如果你通过集成面板连接 Supabase，Bolt 会自动处理）
• 在预览中端到端测试认证流程
• 通过调整预览面板尺寸测试移动端响应式
• 清理模拟数据和测试代码

部署后建议：

• 在项目设置中配置自定义域名，获得专业 URL
• 开启 Supabase 生产环境设置（关闭邮件自动确认、设置频率限制）
• 监控 Supabase 用量——免费版包含 500MB 数据库和 50,000 月活用户

第六步：通过 Bolt 聊天持续迭代

应用已上线，但你会想持续改进。Bolt 的聊天面板就是迭代的地方。以下是有用的后续提示词：

添加功能：

修复 bug：

改进 UI：

打磨细节：

高效迭代的关键：一次只做一个功能。如果你在一个提示词里提五个需求，其中一个出错，Bolt 得排查五个。小而聚焦的提示词产出更可靠。

常见问题排查

预览白屏/空白

• 检查浏览器控制台（右键 → 检查 → Console），找 JavaScript 错误
• 告诉 Bolt："预览白屏。检查渲染错误并修复。"
• 最常见原因：Supabase 客户端未初始化，或环境变量缺失

部署失败"错误

• 检查 Bolt 项目设置中 Supabase 环境变量是否已设置
• 重试部署——偶发的构建失败是正常的
• 如果持续失败，告诉 Bolt："检查部署构建日志并修复错误。"

认证不工作

• 确认 Supabase 项目 URL 和 anon key 正确
• 检查 Supabase → Authentication → Providers 中邮箱/密码认证方式是否开启
• 测试时关闭 Supabase Auth 设置中的"确认邮箱"

Token 用量消耗过快

• Bolt.new 采用 Token 计费模式。长而复杂的提示词消耗更多 Token
• 策略性使用免费版的每日 Token 额度：打字前先想好提示词
• 把复杂的多步骤需求合并成一个详细提示词，而不是多次简短来回对话

预览正常但部署后有问题

• 检查 Supabase RLS 策略——预览和部署用同一个 anon key，但部署的 URL 可能有 CORS 问题
• 在 Supabase → Authentication → URL Configuration 中，将部署后的 Bolt URL 加入允许的重定向地址
• 确认你在生产环境 Supabase 项目上运行了 SQL 迁移脚本（不是另一个项目）

内存不足"或 WebContainer 崩溃

• 文件很多的大型项目可能超出浏览器内存限制
• 重构：让 Bolt 合并重复的组件
• 在插件较少的全新浏览器标签页中打开 Bolt

相关教程

• Windsurf AI 编辑器零基础教程：2026 完全指南
• Cursor Rules 完全指南：.cursorrules 文件编写教程
• OpenAI Codex CLI 终端 AI 编程入门教程