我在过去一年中帮助三家公司从 Bubble 迁移出来。每一次都是同样的开始：团队中的某个人打开月度账单，看到那个数字后倒吸一口冷气，然后开始谷歌搜索"Bubble 替代品"。如果这就是你现在的处境，先深呼吸。你并不孤单，这确实是一个可以解决的问题。

Bubble 在快速构建 MVP 方面确实很不错。我向早期初创公司创始人推荐过无数次。但我一直看到一个模式：产品增长了，团队增长了，用户基数增长了——突然间 Bubble 跟不上了。它在拖累你。工作流单位（WU）定价模式在 1,000 个用户时看起来还不错，到了 50,000 个用户就成了严重问题。视觉编辑器曾经让人感到自由，但当你需要自定义逻辑时，它就像笼子一样。页面加载时间曾经"可以接受"，现在变得令人尴尬。

这篇文章是我希望在第一次进行迁移时就拥有的迁移指南。我们将讨论为什么团队会超越 Bubble，2026 年真实成本是什么样的，以及如何实际执行迁移到 Next.js 和 Supabase，同时不会让你的公司陷入困境。

目录

Outgrown Bubble? How to Migrate to Next.js and Supabase in 2026

为什么团队会超越 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
入门版 $32/月 10,000 WU 每个操作 1 WU 每个操作 0.2 WU
增长版 $129/月 50,000 WU 每个操作 1 WU 每个操作 0.2 WU
团队版 $349/月 150,000 WU 每个操作 1 WU 每个操作 0.2 WU
企业版 自定义 自定义 自定义 自定义
超额 按 WU — $0.003/WU $0.003/WU

这是丑陋的地方。一个拥有 10,000 个活跃用户的中等复杂度 SaaS 应用每月可以轻松消耗 500,000-1,000,000 个 WU。这是 除了 团队套餐之外的 $1,050-$2,550 的超额费用。我见过公司为可以在 $50-200/月的云基础设施上运行的应用在 Bubble 上支付 $3,000-$8,000/月。

WU 模型特别有惩罚性，因为它对在自定义堆栈中基本上免费的事情收费。搜索数据库？花费 WU。安排循环工作流？WU。发送通知？WU。每次 API 调用，服务器端的每次条件检查——都会累加。

最真正刺痛的是：Bubble 的定价只朝一个方向发展。WU 模型取代了旧的基于容量的定价，许多用户的账单在一夜之间增加了 2-5 倍。没有保证不会再发生。

为什么 Next.js + Supabase 是正确选择

多年来我评估过数十个 Bubble 退出策略。Rails、Django、Laravel、纯 React with Firebase——它们都有效。但对于特别来自 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（增长版） 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
自定义代码 非常有限 无限制

这些数字不是理论性的。它们基于我与工作过的公司看到的实际账单。

Outgrown Bubble? How to Migrate to Next.js and Supabase in 2026 - architecture

架构对比：Bubble vs Next.js + Supabase

让我们将 Bubble 的概念映射到新堆栈，以便你可以看到什么去了哪里：

Bubble 概念 Next.js + Supabase 等效
页面 Next.js 页面/路由（App Router）
可重用元素 React 组件
视觉元素 JSX + Tailwind CSS / 组件库
工作流 API 路由、服务器操作、边缘函数
数据库事物 PostgreSQL 表
数据类型和字段 具有适当类型的表列
隐私规则 Supabase 行级安全（RLS）
后端工作流 Supabase 边缘函数或 cron 作业
API 连接器 原生 fetch/axios 调用
插件 npm 包
用户身份验证 Supabase Auth 或 Auth.js
文件上传 Supabase 存储
调度 pg_cron 或外部（Inngest、Trigger.dev）

迁移方案

不要尝试一次重建所有东西。我见过那样的失败得很惨。这是实际工作的分阶段方法。

第 1 阶段：审计和规划（1-2 周）

在写一行代码之前，记录你的 Bubble 应用所做的一切。我是说一切：

  1. 映射每一页——截图、用户流、每一页读/写的数据
  2. 编目所有工作流——服务器端和客户端、什么触发它们、它们做什么
  3. 记录数据模型——每个数据类型、每个字段、每个关系
  4. 列出所有集成——Stripe、SendGrid、Twilio，不管你用什么插件
  5. 识别要删除的内容——我保证有没人使用的功能。不要迁移死代码。

第 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——你需要下载这些文件并重新上传到 Supabase 存储，在 Bubble 应用离线前
  • 列表字段导出为逗号分隔的 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"Group"是带有 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">仪表板</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 中按计划运行的东西），Supabase 边缘函数与 pg_cron 对大多数用例都运作良好。对于更复杂的作业调度，Trigger.dev 或 Inngest 是与 Next.js 自然集成的优秀选择。

身份验证和用户迁移

这是整个迁移中最棘手的部分。你的用户有存储在 Bubble 中的密码，你无法导出密码哈希。你有两个选项：

  1. 强制密码重置——向所有用户发送一封"我们已升级我们的平台"电子邮件，带有密码重置链接。简单但产生摩擦。
  2. 延迟迁移——设置一个自定义身份验证流，在首次登录时，尝试针对 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 的数据导出将有会让你惊讶的边界情况。你没有预期的 null 值。重复记录。孤立关系。

忘记文件存储

Bubble 在他们的 CDN 上托管你上传的文件。当你取消 Bubble 计划时，这些 URL 就失效了。确保每一个文件都在你切换开关前被下载并重新上传到 Supabase 存储。

不早设置监控

在 Bubble 中，你不考虑监控，因为你实际上无法对问题做任何事情。在你的新堆栈中，从第一天起就设置 Sentry 以进行错误跟踪和 Vercel Analytics（或 Plausible/PostHog）用于性能监控。

在你不应该的时候独自行动

如果你的 Bubble 应用很复杂且对收入至关重要，认真考虑从做过这个的团队获得帮助。失败迁移的成本——丢失数据、停机时间、用户流失——远远超过专业帮助的成本。我们的 定价页面 有关于参与看起来如何的细节。

常见问题

从 Bubble 迁移到 Next.js 和 Supabase 需要多长时间？

对于一个有 10-30 页和中等复杂度的典型 SaaS 应用，预期完整迁移需要 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，是一次性投资，可以无限扩展。

运行 Next.js + Supabase 应用相比 Bubble 要花多少钱？

对于大多数 SaaS 应用，你看 Vercel + Supabase 的 $45-200/月，这是本会在 Bubble 上花费 $349-5,000+/月的。Supabase Pro 是 $25/月，Vercel Pro 是 $20/月。在规模上，你的成本增长得慢得多，因为你为实际计算资源付费，而不是工作流单位。粗略的经验法则：预计支付 Bubble 成本的 5-20%。

迁移会影响我的 SEO 吗？

它可以显著改进。Bubble 应用是客户端渲染且缓慢，这伤害核心 Web Vitals 分数。Next.js 支持服务器端渲染和静态生成，这意味着更快的页面加载和更好的可爬性。只是确保你设置了从旧 Bubble URL 到新 Next.js 路由的适当 301 重定向，几周内你应该看到 SEO 改进。

我需要了解 PostgreSQL 才能使用 Supabase 吗？

基本的 SQL 知识帮助很大，但 Supabase 提供了可视化表编辑器和 JavaScript 客户端库，可以抽象大多数查询。也就是说，理解 SQL 会使你效率大幅提高。对于复杂查询、报告和性能调优，SQL 知识是必不可少的。如果你的团队没有 SQL 经验，现在是投资学习的好时机——这是一项永远值得回报的技能。

在迁移期间，我的 Bubble 应用的 API 集成会发生什么？

你需要在 Next.js 应用中重建每个集成。好消息是这通常用代码比用 Bubble 的 API 连接器插件容易得多。需要 Bubble 中需要插件和 15 个工作流的 Stripe 集成可能是用 Stripe Node.js SDK 的 50 行代码。列出你的 Bubble 应用与之交谈的每个外部服务，并一次处理一个。

我可以为生产使用 Supabase 的免费级别吗？

Supabase 的 2026 年免费级别为你提供 500MB 数据库存储、1GB 文件存储和 50,000 个每月活跃用户在身份验证上。对于非常早期阶段的产品，这可以起作用。但对于任何认真的生产应用，你会想要 $25/月的 Pro 计划，以获得更好的性能、每日备份和没有项目在不活动后暂停。这与 Bubble 相比仍然便宜得离谱。