Bubbleから卒業？2026年にNext.jsとSupabaseへ移行する方法
この1年だけで、3つの企業がBubbleからの移行を支援しました。すべてが同じパターンで始まります。誰かが月間請求書を見て、数字を見て顔が青くなり、「Bubble代替案」をGoogleで検索するのです。もし今それがあなたなら、深呼吸してください。あなたは一人ではありませんし、これは解決可能な問題です。
Bubbleは本当にMVPを立ち上げるのに優れています。アーリーステージの創業者に何度も勧めてきました。しかし、ずっと見ているパターンがあります。プロダクトが成長し、チームが成長し、ユーザーベースが成長し、突然Bubbleはあなたと一緒に成長していません。あなたを足引っ張っています。1,000ユーザーの時は問題なさそうに見えたワークフローユニット（WU）の価格モデルが、50,000ユーザーになると深刻な問題になります。自由だと感じていたビジュアルエディタが、カスタムロジックが必要になると檻のように感じ始めます。「許容範囲」だったページロード時間が、恥ずかしいレベルになります。
この記事は、最初にこれをやった時に欲しかった移行ガイドです。チームがなぜBubbleから卒業するのか、2026年の実際のコストがどう見えるのか、Next.jsとSupabaseへの移行をどう実行するか（会社を焼け野原にせずに）について話し合います。
目次
- チームがなぜBubbleから卒業するのか
- Bubbleの2026年価格現実確認
- なぜNext.js + Supabaseが最適なのか
- アーキテクチャ比較：BubbleとNext.js + Supabase
- 移行プレイブック
- データ移行：Bubbleのデータベースから脱出
- Next.jsでフロントエンドを再構築
- Supabaseをバックエンドとして設定
- 認証とユーザー移行
- 移行後のパフォーマンスとコスト
- よくあるピットフォールと回避方法
- FAQ
チームがなぜBubbleから卒業するのか
「卒業する」が実際に何を意味するのか具体的に説明しましょう。一つのことではなく、通常は互いに複合している複数の苦しみの組み合わせです。
パフォーマンスの壁
Bubbleアプリは共有インフラストラクチャで動作します。あなたのアプリは他のBubbleアプリと計算リソースを共有しています。アプリがトラフィックスパイクを受けると、単にインスタンスを追加することはできません。Bubbleの気分次第です。500以上の同時ユーザーを持つBubbleアプリが基本的なデータベースクエリで3～5秒の応答時間に達するのを見てきました。これはバグではなく、アーキテクチャです。
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レート |
|---|---|---|---|---|
| Free | $0 | 限定（テストのみ） | N/A | N/A |
| Starter | $32/mo | 10,000 WU | 1 WU per action | 0.2 WU per action |
| Growth | $129/mo | 50,000 WU | 1 WU per action | 0.2 WU per action |
| Team | $349/mo | 150,000 WU | 1 WU per action | 0.2 WU per action |
| Enterprise | カスタム | カスタム | カスタム | カスタム |
| 超過分 | Per WU | — | $0.003/WU | $0.003/WU |
ここで厄介になります。10,000アクティブユーザーを持つ中程度の複雑さのSaaSアプリは、毎月500,000～1,000,000 WUを簡単に消費できます。それはTeamプランの上に$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、FirebaseがあるプレーンなReact、これらはすべて有効です。しかし、具体的にBubbleから来ているチームの場合、Next.js + Supabaseの組み合わせは打つのが難しい甘いスポットに当たります。
Next.jsがBubbleができないものを与える
Next.js 15（2026年の現在の安定リリース）はサーバーサイドレンダリング、静的生成、APIルート、ミドルウェア、エッジ関数をすべて1つのフレームワークで与えます。ページはそのページが実際に必要とするJavaScriptのみを配信しているため高速に読み込みます。App Routerはレイアウト、ロード状態、エラー境界を与え、これはBubbleのワークフロー数十に近似するのに要するでしょう。
さらに重要に、それはReactです。Reactエコシステムは巨大です。日付ピッカーが必要ですか？50の戦闘テスト済みオプションがあります。チャートが必要ですか？Recharts、Visx、Nivo、選択してください。認証が必要ですか？NextAuth.js（今はAuth.js）またはSupabase Auth。プラグイン開発者がバグを修正するのを待つために止まることはありません。
このパスを検討している場合、私たちのNext.js開発チームは複数のBubbleアプリを移行し、プロセスが何のように見えるかについて詳細を共有することができます。
Supabaseはバブルのバックエンドを置き換える
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と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ストレージ |
| スケジューリング | 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 URLsとしてエクスポート -- Bubbleアプリがオフラインになってからこれらのファイルをダウンロードし、Supabaseストレージに再度アップロードする必要があります
- リストフィールドはカンマ区切りのBubble IDsとしてエクスポート -- これらは適切なジャンクションテーブルになる必要があります
- 日付形式は一貫していない -- 日付解析を徹底的にテストします
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に保存されたパスワードを持っており、パスワードハッシュをエクスポートできません。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% |
コスト削減だけで移行を2ヶ月以内に正当化しました。パフォーマンス改善は、その後の四半期で推定15%でチャーンを削減しました。
これらの数字を見てくださり「それが欲しいが、それをやる開発チームがない」と思うなら、それはまさにこの種のプロジェクトを処理します。チェックしてください。 ヘッドレスCMSとアプリ開発の作業または連絡移行評価のために。
よくあるピットフォールと回避方法
Bubbleを正確に複製しようとする
しないでください。Bubbleのやり方はしばしば、コードベースのスタックでそれを行う最悪の方法です。移行をユーザーフローとデータアーキテクチャを再考する機会として使用してください。
データ移行を過小評価
データ移行に思ったより2倍長い予算を付けてください。Bubbleのデータエクスポートはあなたを驚かすエッジケースを持つでしょう。予期しないnull値。重複レコード。孤立した関係。
ファイルストレージを忘れる
BubbleはアップロードされたファイルをCDNでホストしています。Bubbleプランをキャンセルすると、これらのURLは死にます。Bubbleアプリをスイッチする前にすべてのファイルをダウンロードし、Supabaseストレージに再度アップロードすることを確認してください。
監視を早期に設定しないこと
Bubbleでは、本当にどうしようもできないので、監視について考えません。新しいスタックで、初日からSentryエラー追跡とVercel Analytics（またはPlausible/PostHog）のパフォーマンス監視を設定します。
単独で行くべきではないとき
Bubbleアプリが複雑で売上が重要な場合、これを前に行ったチームから助けを得ることを真摯に検討してください。失敗した移行のコスト（失われたデータ、ダウンタイム、ユーザーチャーン）は専門的な援助のコストをはるかに超えています。私たちの価格ページには、エンゲージメントが何のように見えるかについて詳細があります。
FAQ
BubbleからNext.jsとSupabaseへの移行にはどのくらい時間がかかりますか？
10～30ページを持つ典型的なSaaSアプリと中程度の複雑さについて、完全な移行に8～16週間を期待します。シンプルなアプリ（ランディングページ+ダッシュボード+ CRUD機能のいくつか）は4～6週間で行うことができます。多くの統合、カスタムロジック、大規模なデータセットを持つ複雑なアプリは16～24週間を取ることができます。データ移行とユーザー認証転移は通常、予想より長くなるものです。
Bubbleから段階的に移行できますか、またはすべて一度に行う必要がありますか？
段階的に行うことは完全にできます。一般的なアプローチは、Bubbleアプリと並んで新しいNext.jsアプリを構築し、機能を一度に移行し、サブドメインルーティングを使用して、ユーザーを正しいバージョンに送信することです。例えば、新しいダッシュボードはapp.yoursite.comに住んでいる間、レガシー機能は依然としてBubbleで実行します。同時に2つのシステムを維持しても独自のコストを認識してください。
FlutterFlow、WeWeb、またはXanoなどのBubble代替案は、代わりに検討すべきですか？
主な問題がBubbleの価格設定だが、あなたはまだノーコード/ローコード搾取が必要な場合、WeWeb（フロントエンド）+ Xano（バックエンド）のようなツールは機能できます。しかし、あなたは別のベンダーロックインを交換していますえきます。Bubbleから卒業している理由がパフォーマンス、スケーラビリティ、またはチームサイズだった場合、あなたは最終的にそれらのツールからも同様に卒業します。Next.js + Supabaseのようなコードベースのスタックに移動することは、一度の投資で無限にスケーリングされます。
Next.js + Supabaseアプリを実行する費用はBubbleに比べてどのくらいですか？
ほとんどのSaaSアプリについて、Bubble上で$349-5,000+/月のコストを削減していたものに対してVercel + Supabaseで$45～200/月を探しています。Supabase Proは$25/月、Vercel Proは$20/月です。スケールで、あなたのコストははるかに遅くなります。ワークフローユニットではなく、実際の計算リソースのために支払っているからです。概算的なルール：Bubbleで支払っていた5～20%の支払いを予想します。
移行による検索エンジン最適化（SEO）は影響を受けますか？
それは劇的に改善することができます。Bubbleアプリはクライアントレンダリングして遅く、Core Web Vitalsスコアを傷つけます。Next.jsはサーバーサイドレンダリングと静的生成をサポートしており、ページロード速度が速くなり、クローラビリティが向上することを意味します。古いBubble URLから新しいNext.jsルートに適切な301リダイレクトを設定し、数週間以内にSEO改善を見るべきです。
Supabaseを使用するためにPostgreSQLを知る必要がありますか？
基本的なSQL知識はたくさん助けますが、Supabaseはビジュアルテーブルエディタとほとんどのクエリを抽象化するJavaScriptクライアントライブラリを提供します。それは言ったが、SQLを理解することはあなたを劇的により効果的にします。複雑なクエリ、報告、パフォーマンスチューニング、SQLの知識は不可欠です。チームがSQLの経験を持たない場合、これは学ぶのに投資する良い時間です。これは永遠に配当を与えるスキルです。
移行中に、BubbleアプリのAPIの統合に何が起こりますか？
各統合をNext.jsアプリで再作成する必要があります。良いニュースは、これはBubbleのAPIコネクタプラグインよりコードで通常はるかに簡単ということです。Stripe統合で、プラグインと15ワークフローを必要としたBubbleは、Stripe Node.js SDKで50行のコードかもしれません。すべての外部サービスのあなたのBubbleアプリが話す完全なリストを作成し、それらを一度に1つタックルしてください。
本番環境でSupabaseの無料ティアを使用できますか？
Supabaseの無料ティアは2026年で500MB のデータベースストレージ、1GBのファイルストレージ、認証で50,000の月間アクティブユーザーを与えます。非常にアーリーステージプロダクトについて、これは機能することができます。しかし、すべての深刻な本番アプリのために、あなたはより良いパフォーマンス、日々のバックアップ、プロジェクト停止なしで$25/月のProプランを望む。それは依然としてBubbleと比較して不当に安いです。