2026年从Bubble迁移到Next.js + Supabase
你的月度账单到了，数字让你瞬间僵住——847美元的工作流单元费用，又来了。你打开新标签页，在搜索栏输入"Bubble替代品"。去年有三位创始人做过完全相同的事情。他们每个人都以为自己陷入了绝境。但实际上，他们只是验证了产品与市场契合度强到足以让Bubble基于使用量的定价模式跟不上他们的增长步伐。根据他们的自定义逻辑在工作流中的分布，迁移到Next.js和Supabase耗时4到9周。其中一个在第二个月节省了640美元/月。另一个将页面加载时间从3.2秒减少到680毫秒，并看到他们的注册转化率上升了11个百分点。如果你的Bubble应用能正常工作，但单位经济学不行，你即将看到迁移的具体过程——包括真实的代码、真实的时间表，以及决定你是否在4周内还是4个月内上线的三个关键决策。
Bubble对于让MVP快速上线确实很棒。我向早期创始人推荐它的次数数不清。但我一直在看到一个模式：产品增长了，团队增长了，用户基数增长了——然后Bubble突然跟不上。它开始拖累你了。看起来在1000个用户时还不错的工作流单元(WU)定价模式，到了50000个用户时就成了严重问题。那个曾经让人感到自由的可视化编辑器，当你需要自定义逻辑时就开始让人感到窒息。那些"可以接受"的页面加载时间现在变成了令人尴尬的存在。
这篇文章是我第一次做这件事时希望拥有的迁移指南。我们将讨论团队为什么会超越Bubble、2026年真实成本是什么样的，以及如何在不毁掉你公司的情况下实际执行到Next.js和Supabase的迁移。
目录
- 为什么团队会超越Bubble
- Bubble的2026年定价现实
- 为什么选择Next.js + Supabase
- 架构对比：Bubble vs Next.js + Supabase
- 迁移行动指南
- 数据迁移：从Bubble的数据库中脱离
- 使用Next.js重建前端
- 将Supabase设置为你的后端
- 身份验证和用户迁移
- 迁移后的性能和成本
- 常见陷阱及如何避免
- 常见问题
为什么团队会超越Bubble
让我们具体说明"超越"实际上意味着什么，因为这不是一回事。通常是多个相互复合的痛点的组合。
性能瓶颈
Bubble应用运行在共享基础设施上。你的应用与其他Bubble应用共享计算资源。当你的应用遇到流量峰值时，你不能只是启动更多实例——你受制于Bubble。我见过有500+并发用户的Bubble应用，基本数据库查询的响应时间达到3-5秒。这不是bug；这是架构本身的问题。
Bubble页面也很重。典型的Bubble页面向客户端传送2-4MB的JavaScript。相比之下，构建良好的Next.js页面可能只传送200-400KB。你的用户能感受到这种差异，特别是在移动设备上。
插件问题
Bubble的插件生态既是它的优势也是它的致命弱点。你会安装用于Stripe集成的插件、用于PDF生成的插件、用于发送电子邮件的插件——每一个都由某个可能在下个星期放弃维护的随机第三方开发者维护。我见过生产应用因为插件作者推送了一个坏的更新而崩溃。你完全无法控制。
供应商锁定是真实存在的
你的整个应用——逻辑、数据、UI——都存在于Bubble的专有系统中。没有"导出我的应用"按钮。你的工作流不是代码；它们是存储在Bubble格式中的可视化配置。如果Bubble改变他们的定价（他们已经这样做过多次），你要么付费，要么从头开始。这对任何企业来说都是一个可怕的谈判地位。
团队扩展问题
尝试在2026年雇用一个"Bubble开发者"。与React/Next.js开发者相比，人才库小得可怜。Bubble中的版本控制与Git相比原始得多。有多个开发者同时在同一个Bubble应用上工作是一种折磨。没有真正的代码审查流程，没有分支策略，没有CI/CD流程。
Bubble的2026年定价现实
Bubble在2023年转向了工作流单元(WU)定价，从那时起他们调整过多次。截至2026年初，以下是你要面对的情况：
| 计划 | 月度成本 | 工作流单元 | 服务器端WU费率 | 客户端WU费率 |
|---|---|---|---|---|
| 免费 | $0 | 有限(仅测试) | N/A | N/A |
| Starter | $32/月 | 10,000 WU | 1 WU每个动作 | 0.2 WU每个动作 |
| Growth | $129/月 | 50,000 WU | 1 WU每个动作 | 0.2 WU每个动作 |
| Team | $349/月 | 150,000 WU | 1 WU每个动作 | 0.2 WU每个动作 |
| Enterprise | 自定义 | 自定义 | 自定义 | 自定义 |
| 超额 | 按WU计 | — | $0.003/WU | $0.003/WU |
这是它变得糟糕的地方。一个中等复杂度的SaaS应用，有10000个活跃用户，每月可以轻松消耗500000-1000000个WU。那是$1050-$2550的超额费用除了Team计划。我见过公司在Bubble上每月支付$3000-$8000，而这些应用可以在$50-200/月的云基础设施上运行。
WU模型特别惩罚性，因为它对在自定义堆栈中基本上是免费的东西收费。搜索你的数据库？那需要WU。安排循环工作流？WU。发送通知？WU。每个API调用、服务器端的每个条件检查——全部累加。
这真正令人痛心的部分是：Bubble的定价只朝一个方向发展。WU模型取代了旧的基于容量的定价，许多用户在一夜之间看到他们的账单增加了2-5倍。没有保证不会再发生。
为什么选择Next.js + Supabase
多年来我评估过几十种Bubble出口策略。Rails、Django、Laravel、带Firebase的纯React——它们都是有效的。但对于专门来自Bubble的团队，Next.js + Supabase组合击中了一个很难被打破的甜点。
Next.js为你提供Bubble无法提供的东西
Next.js 15（2026年当前稳定版本）为你提供服务器端渲染、静态生成、API路由、中间件和边缘函数全部在一个框架中。你的页面加载快是因为你只传送该页面实际需要的JavaScript。App Router为你提供布局、加载状态和错误边界，在Bubble中近似实现这些需要数十个工作流。
更重要的是，它是React。React生态系统是巨大的。需要日期选择器？有50个久经考验的选项。需要图表？Recharts、Visx、Nivo——选择你最喜欢的。需要身份验证？NextAuth.js（现在是Auth.js）或Supabase Auth。你永远不会被困住等待插件开发者修复bug。
如果你考虑这条路，我们的Next.js开发团队已经迁移了几个Bubble应用，可以分享关于该过程具体是什么样的。
Supabase替代Bubble的后端
Supabase是最接近"Bubble后端替代品"的东西。原因如下：
- PostgreSQL数据库——真正的、可查询的、可索引的关系型数据库，而不是Bubble的怪异数据结构
- 行级安全性(RLS)——在数据库级别定义谁可以读/写什么数据
- 内置身份验证——邮箱/密码、魔法链接、OAuth提供者，全部处理
- 实时订阅——无需轮询的实时数据更新
- 存储——带有CDN交付的文件上传
- 边缘函数——用于自定义逻辑的无服务器函数
Supabase在2026年的定价远低于Bubble的规模：
| Bubble (Growth) | Supabase (Pro) + Vercel (Pro) | |
|---|---|---|
| 月度基础成本 | $129 | $25 + $20 = $45 |
| 10K用户时 | $349+ (可能超额) | ~$75-150 (含使用量) |
| 50K用户时 | $2,000-5,000+ | ~$200-500 |
| 100K用户时 | $5,000-12,000+ | ~$400-1,200 |
| 数据库访问 | 专有查询 | 完整PostgreSQL |
| 自定义代码 | 非常有限 | 无限制 |
这些数字不是理论上的。它们基于我合作过的公司的真实账单。
架构对比：Bubble vs Next.js + Supabase
让我们映射Bubble的概念到新堆栈，这样你可以看到什么去哪里：
| Bubble概念 | Next.js + Supabase等效物 |
|---|---|
| 页面 | Next.js页面/路由(App Router) |
| 可重用元素 | React组件 |
| 可视元素 | JSX + Tailwind CSS / 组件库 |
| 工作流 | API路由、服务器动作、边缘函数 |
| 数据库东西 | PostgreSQL表 |
| 数据类型与字段 | 带有正确类型的表列 |
| 隐私规则 | Supabase行级安全(RLS) |
| 后端工作流 | Supabase边缘函数或定时任务 |
| API连接器 | 原生fetch/axios调用 |
| 插件 | npm包 |
| 用户身份验证 | Supabase Auth或Auth.js |
| 文件上传 | Supabase Storage |
| 调度 | pg_cron或外部(Inngest、Trigger.dev) |
迁移行动指南
不要尝试一次性重建所有内容。我见过那样的方式惨败。这是实际可行的分阶段方法。
第1阶段：审计和规划(1-2周)
在写一行代码之前，记录你的Bubble应用做的一切。我是说所有东西：
- 映射每一页——截图、用户流、每页读/写什么数据
- 编目所有工作流——服务器端和客户端、是什么触发它们、它们做什么
- 记录数据模型——每个数据类型、每个字段、每个关系
- 列出所有集成——Stripe、SendGrid、Twilio、无论什么插件你在使用
- 确定要删减的东西——我保证有没人使用的功能。不要迁移无用的东西。
第2阶段：构建基础(2-3周)
建立新堆栈：
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm install @supabase/supabase-js @supabase/ssr
设置你的Supabase项目，配置身份验证，创建你的数据库架构。这是你有机会修复在Bubble中犯的所有数据建模错误的地方。利用适当的外键、索引和数据类型。
第3阶段：构建核心功能(4-8周)
从获得最多流量的功能开始。在Next.js中正确地构建它们。不要试图复制Bubble的确切UI——利用这个机会改进UX。
第4阶段：迁移数据和用户(1-2周)
这是恐怖的部分，值得有自己的部分。
第5阶段：切换(1周)
同时运行两个系统，验证一切正常，然后翻转DNS。在接下来的几周内将Bubble应用保持为只读模式作为安全网。
数据迁移：从Bubble的数据库中脱离
Bubble允许你将数据导出为CSV文件。那是你的起点，但不如你希望的那样干净。
# 转换Bubble CSV导出的Python脚本示例
import csv
import json
from supabase import create_client
supabase = create_client(SUPABASE_URL, SUPABASE_KEY)
with open('bubble_users_export.csv', 'r') as f:
reader = csv.DictReader(f)
for row in reader:
# Bubble以奇怪的格式导出日期
created = convert_bubble_date(row['Created Date'])
# Bubble使用看起来像"1677234567890x123456789"的唯一ID
# 你会想将这些映射到UUID
user_data = {
'legacy_bubble_id': row['unique id'],
'email': row['email'],
'name': row['name_text'],
'created_at': created,
# 映射所有你的自定义字段
}
supabase.table('users').insert(user_data).execute()
Bubble数据导出的关键问题：
- 关系存储为Bubble ID——你需要构建一个映射表来将这些转换为新的外键
- 文件字段导出为Bubble CDN URL——你需要下载这些文件并在Bubble应用离线前重新上传到Supabase Storage
- 列表字段导出为逗号分隔的Bubble ID——这些需要变成适当的连接表
- 日期格式不一致——彻底测试你的日期解析
对于Bubble Data API，你也可以以编程方式拉取数据，这有时比大数据集的CSV导出更容易：
// 从Bubble的Data API获取数据
const fetchBubbleData = async (type, cursor = 0) => {
const response = await fetch(
`https://yourapp.bubbleapps.io/api/1.1/obj/${type}?cursor=${cursor}&limit=100`,
{
headers: {
'Authorization': `Bearer ${BUBBLE_API_KEY}`
}
}
);
return response.json();
};
使用Next.js重建前端
Bubble的可视化编辑器一旦你看到模式就惊人地很好地映射到基于组件的架构。Bubble的"可重用元素"字面上是一个React组件。Bubble的"组"是一个带有Tailwind类的<div>。
这是我对在Bubble中数据繁重的页面使用的模式：
// app/dashboard/page.tsx
import { createClient } from '@/lib/supabase/server';
import { DashboardStats } from '@/components/dashboard-stats';
import { RecentActivity } from '@/components/recent-activity';
export default async function DashboardPage() {
const supabase = await createClient();
const { data: stats } = await supabase
.from('user_stats')
.select('*')
.single();
const { data: activity } = await supabase
.from('activity_log')
.select('*, project:projects(name)')
.order('created_at', { ascending: false })
.limit(20);
return (
<div className="max-w-7xl mx-auto px-4 py-8">
<h1 className="text-3xl font-bold mb-8">Dashboard</h1>
<DashboardStats stats={stats} />
<RecentActivity items={activity} />
</div>
);
}
注意数据获取是如何在服务器端发生的。没有加载旋转器，没有瀑布式请求。页面到达时已完全渲染。这本身就让应用感觉比Bubble版本快得多。
对于组件库，我在shadcn/ui上取得了很好的结果。它为你提供了精美的、可访问的、由你拥有的组件（它们被复制到你的代码库中，而不是从包导入）。结合Tailwind CSS，你可以快速重建Bubble UI，并且它们会更加响应迅速和高效。
将Supabase设置为你的后端
Supabase的行级安全性是你的Bubble隐私规则的替代品，说实话，它更强大：
-- 只让用户看到自己的数据
CREATE POLICY "Users can view own data"
ON user_profiles FOR SELECT
USING (auth.uid() = user_id);
-- 只让用户更新自己的个人资料
CREATE POLICY "Users can update own profile"
ON user_profiles FOR UPDATE
USING (auth.uid() = user_id);
-- 让管理员看到所有内容
CREATE POLICY "Admins can view all"
ON user_profiles FOR SELECT
USING (
EXISTS (
SELECT 1 FROM user_roles
WHERE user_id = auth.uid()
AND role = 'admin'
)
);
对于后端工作流（在Bubble中按计划运行的东西），带有pg_cron的Supabase边缘函数对大多数使用情况都很有效。对于更复杂的任务调度，Trigger.dev或Inngest是与Next.js自然集成的极好选择。
身份验证和用户迁移
这是整个迁移中最复杂的部分。你的用户密码存储在Bubble中，你无法导出密码哈希。你有两个选项：
- 强制重置密码——向所有用户发送"我们已升级平台"电子邮件，带有密码重置链接。简单但造成摩擦。
- 延迟迁移——设置一个自定义身份验证流程，在首次登录时尝试针对Bubble的API进行身份验证。如果成功，在Supabase中用他们刚输入的密码创建用户。
选项2更多工作，但用户体验好得多。这是大致的形状：
// app/api/auth/migrate-login/route.ts
export async function POST(request: Request) {
const { email, password } = await request.json();
// 先尝试Supabase
const { data, error } = await supabase.auth.signInWithPassword({
email, password
});
if (data.user) return Response.json({ success: true });
// 如果不在Supabase中，尝试Bubble
const bubbleAuth = await authenticateWithBubble(email, password);
if (bubbleAuth.success) {
// 在Supabase中创建用户，使用相同密码
const { data: newUser } = await supabase.auth.admin.createUser({
email,
password,
email_confirm: true,
});
// 迁移他们的个人资料数据
await migrateUserProfile(bubbleAuth.userId, newUser.user.id);
// 登录他们
return Response.json({ success: true });
}
return Response.json({ error: 'Invalid credentials' }, { status: 401 });
}
迁移后的性能和成本
这是我在2025年底帮助迁移的项目管理SaaS的真实数字：
| 指标 | Bubble上 | 迁移后 |
|---|---|---|
| 平均页面加载时间 | 3.8s | 0.9s |
| 到达可交互时间 | 5.2s | 1.4s |
| Lighthouse性能评分 | 38 | 92 |
| 月度基础设施成本 | $4,200 | $187 |
| 月度活跃用户 | 12,000 | 12,000 |
| API响应时间(p95) | 1,800ms | 180ms |
| 正常运行时间(3月平均) | 99.2% | 99.97% |
仅成本降低就在两个月内证明了迁移的合理性。性能改进在随后的季度中降低了估计15%的流失。
如果你看着这些数字在想"我想要那个，但没有开发团队来完成它"，那正是我们处理的那种项目。查看我们的无头CMS和应用开发工作，或联系我们进行迁移评估。
常见陷阱及如何避免
试图完全复制Bubble
不要。Bubble的做事方式通常是在基于代码的堆栈中最糟糕的方式。利用迁移作为重新思考用户流和数据架构的机会。
低估数据迁移
预算两倍的时间用于数据迁移。Bubble的数据导出会有让你惊讶的边缘情况。你没想到的空值。重复的记录。孤立的关系。
忘记文件存储
Bubble在他们的CDN上托管你上传的文件。当你取消Bubble计划时，这些URL就死了。确保在翻转开关之前每个文件都被下载并重新上传到Supabase Storage。
未尽早设置监控
在Bubble中，你不会考虑监控，因为你真的无法对问题做任何事。在你的新堆栈中，从第一天起就设置Sentry进行错误跟踪和Vercel Analytics（或Plausible/PostHog）进行性能监控。
当不应该时独自行动
如果你的Bubble应用很复杂且收入关键，认真考虑从之前做过这件事的团队获取帮助。迁移失败的成本——丢失数据、停机时间、用户流失——远超过专业帮助的成本。我们的定价页面有关于业务是什么样的详细信息。
常见问题
从Bubble迁移到Next.js和Supabase需要多长时间？
对于一个典型的SaaS应用，有10-30页和中等复杂度，预计8-16周进行完整迁移。简单应用（登陆页面+仪表板+几个CRUD功能）可以在4-6周内完成。复杂应用，有很多集成、自定义逻辑和大数据集，可以花费16-24周。数据迁移和用户身份验证过渡通常是花费时间比预期更多的东西。
我可以从Bubble逐步迁移，还是必须一次性全部迁移？
你绝对可以逐步做。一个常见的方法是在Bubble应用旁边构建新的Next.js应用，一次迁移一个功能，并使用子域路由将用户发送到正确的版本。例如，你的新仪表板存在于app.yoursite.com，而遗留功能仍在Bubble上运行。只要意识到同时维护两个系统有其自身成本。
关于Bubble替代品，如FlutterFlow、WeWeb或Xano——我应该考虑那些而不是吗？
如果你的主要问题是Bubble的定价，但你仍想要无代码/低代码方法，像WeWeb（前端）+ Xano（后端）这样的工具可以工作。但你在用一个供应商锁定交换另一个。如果你超越Bubble是因为性能、可扩展性或团队规模，你最终也会超越那些工具。迁移到像Next.js + Supabase这样的基于代码的堆栈是一次性投资，可以无限扩展。
与Bubble相比，运行一个Next.js + Supabase应用要花多少钱？
对于大多数SaaS应用，你看着$45-200/月在Vercel + Supabase上，而在Bubble上会花费$349-5000+/月。Supabase Pro是$25/月，Vercel Pro是$20/月。按规模，你的成本增长得慢得多，因为你为实际计算资源付款，而不是工作流单元。一个粗略的经验法则：期望支付你在Bubble上支付的5-20%。
迁移会影响我的SEO吗？
它可以大幅改进。Bubble应用是客户端渲染且缓慢的，这伤害了Core Web Vitals评分。Next.js支持服务器端渲染和静态生成，这意味着更快的页面加载和更好的可爬性。只需确保你从旧的Bubble URL设置了适当的301重定向到新的Next.js路由，你应该在几周内看到SEO改进。
我需要了解PostgreSQL才能使用Supabase吗？
基本的SQL知识帮助很大，但Supabase提供了一个可视化表编辑器和一个JavaScript客户端库，可以抽象大多数查询。也就是说，理解SQL会让你的效率大幅提高。对于复杂查询、报告和性能调优，SQL知识是必不可少的。如果你的团队没有SQL经验，这是一个学习它的好时机——这是一个终身受益的技能。
在迁移过程中我的Bubble应用的API集成会发生什么？
你需要在你的Next.js应用中重新创建每个集成。好消息是这通常比用Bubble的API Connector插件容易得多。一个在Bubble中需要插件和15个工作流的Stripe集成可能只需要用Stripe Node.js SDK的50行代码。列出你的Bubble应用与之通信的每个外部服务，然后一次处理一个。
我可以为生产使用Supabase的免费层吗？
Supabase的2026年免费层给你500MB的数据库存储、1GB的文件存储和50000个每月活跃用户身份验证。对于非常早期的产品，这可能有效。但对于任何认真的生产应用，你会想要Pro计划$25/月，以获得更好的性能、每日备份和不再有非活跃后的项目暂停。它与Bubble相比仍然非常便宜。