Sua fatura mensal chega e o número o congela — $847 em unidades de workflow, novamente. Você abre uma nova aba e digita "alternativa ao Bubble" na barra de pesquisa. Três founders fizeram exatamente isso antes de nos ligar no ano passado. Cada um pensava que tinha se trancado em um canto. Na verdade, o que eles tinham feito era validar o product-market fit com força suficiente para que o preço baseado em uso do Bubble não conseguisse escalar com eles. A migração para Next.js e Supabase levou entre quatro e nove semanas, dependendo de quanto código customizado vivia em seus workflows. Um economizou $640/mês já no segundo mês. Outro reduziu o carregamento de página de 3,2 segundos para 680 milissegundos e viu sua conversão de signup subir onze pontos. Se seu app Bubble funciona mas a economia unitária não funciona, você está prestes a ver exatamente como a migração se divide — com código real, cronogramas reais e as três decisões que determinam se você vai deployar em quatro semanas ou quatro meses.

Bubble é genuinamente ótimo para tirar um MVP do chão. Recomendei para founders em estágio inicial mais vezes do que consigo contar. Mas existe um padrão que continuo vendo: o produto cresce, o time cresce, a base de usuários cresce -- e de repente Bubble não cresce com você. Está te segurando. O modelo de preço de unidade de workflow (WU) que parecia ok com 1.000 usuários se torna um problema sério com 50.000. O editor visual que parecia libertador começa a parecer uma jaula quando você precisa de lógica customizada. Os tempos de carregamento de página que eram "aceitáveis" se tornam constrangedores.

Este artigo é o guia de migração que gostaria de ter tido na primeira vez que fiz isso. Vamos falar sobre por que times saem do Bubble, qual é o custo real em 2026 e como realmente executar uma migração para Next.js e Supabase sem queimar sua empresa.

Índice

Saiu do Bubble? Como Migrar para Next.js e Supabase em 2026

Por Que Times Saem do Bubble

Vamos ser específicos sobre o que "sair" realmente significa, porque não é uma coisa. É geralmente uma combinação de vários pontos de dor que se compõem um ao outro.

Paredes de Performance

Apps Bubble rodam em infraestrutura compartilhada. Seu app compartilha recursos de computação com outros apps Bubble. Quando seu app recebe picos de tráfego, você não pode simplesmente girar mais instâncias -- você está à mercê do Bubble. Vi apps Bubble com 500+ usuários simultâneos baterem tempos de resposta de 3-5 segundos para queries de banco de dados básicas. Isso não é um bug; é a arquitetura.

Páginas Bubble também são pesadas. Uma página Bubble típica envia 2-4MB de JavaScript para o cliente. Compare isso com uma página Next.js bem construída que pode enviar 200-400KB. Seus usuários sentem essa diferença, especialmente em mobile.

O Problema dos Plugins

O ecossistema de plugins do Bubble é tanto sua força quanto seu calcanhar de Aquiles. Você vai instalar plugins para integração com Stripe, para geração de PDF, para envio de emails -- e cada um é mantido por um desenvolvedor terceirizado aleatório que pode abandoná-lo na próxima terça. Vi apps em produção quebrarem porque um autor de plugin fez push de uma atualização ruim. Você tem zero controle.

Vendor Lock-in É Real

Toda sua aplicação -- a lógica, os dados, a UI -- vive dentro do sistema proprietário do Bubble. Não existe botão "exportar meu app". Seus workflows não são código; são configurações visuais armazenadas no formato do Bubble. Se Bubble mudar seu preço (o que fizeram, múltiplas vezes), você paga mais ou começa de novo. Essa é uma posição de negociação terrível para qualquer negócio.

Problemas de Scaling de Time

Tente contratar um "desenvolvedor Bubble" em 2026. O pool de talento é minúsculo comparado a desenvolvedores React/Next.js. Controle de versão em Bubble é primitivo comparado a Git. Ter múltiplos desenvolvedores trabalhando no mesmo app Bubble simultaneamente é um exercício em frustração. Não existe processo real de code review, não existe estratégia de branching, não existe pipeline de CI/CD.

Realidade do Preço do Bubble em 2026

Bubble mudou para preço de unidade de workflow (WU) em 2023 e ajustou várias vezes desde então. No início de 2026, aqui está o que você está olhando:

Plano Custo Mensal Unidades de Workflow Taxa WU Servidor Taxa WU Cliente
Gratuito $0 Limitado (apenas teste) N/A N/A
Iniciante $32/mês 10.000 WU 1 WU por ação 0,2 WU por ação
Crescimento $129/mês 50.000 WU 1 WU por ação 0,2 WU por ação
Time $349/mês 150.000 WU 1 WU por ação 0,2 WU por ação
Enterprise Customizado Customizado Customizado Customizado
Excedente Por WU — $0.003/WU $0.003/WU

Aqui é onde fica feio. Um app SaaS moderadamente complexo com 10.000 usuários ativos pode facilmente queimar 500.000-1.000.000 WUs por mês. Isso é $1.050-$2.550 em cobranças de excedente em cima de do plano Team. Vi empresas pagando $3.000-$8.000/mês no Bubble para apps que poderiam rodar com $50-200/mês de infraestrutura em nuvem.

O modelo WU é particularmente punitivo porque cobra você por coisas que seriam essencialmente grátis em um stack customizado. Pesquisar seu banco de dados? Custa WUs. Agendar um workflow recorrente? WUs. Enviar uma notificação? WUs. Cada chamada de API, cada verificação condicional no lado do servidor -- tudo se acumula.

E aqui está a parte que realmente dói: o preço do Bubble só se moveu em uma direção. O modelo WU substituiu o antigo preço baseado em capacidade, e muitos usuários viram suas contas aumentar 2-5x da noite para o dia. Não há garantia de que não aconteça novamente.

Por Que Next.js + Supabase É o Movimento

Avaliei dezenas de estratégias de saída do Bubble ao longo dos anos. Rails, Django, Laravel, React puro com Firebase -- são todas válidas. Mas para times que vêm do Bubble especificamente, a combinação Next.js + Supabase atinge um sweet spot que é difícil de bater.

Next.js Oferece o Que Bubble Não Consegue

Next.js 15 (o release estável atual em 2026) oferece server-side rendering, static generation, API routes, middleware e edge functions tudo em um framework. Suas páginas carregam rápido porque você está enviando apenas o JavaScript que a página realmente precisa. O App Router oferece layouts, loading states e error boundaries que levariam dezenas de workflows do Bubble para aproximar.

Mais importante ainda, é React. O ecossistema React é enorme. Precisa de um date picker? Existem 50 opções battle-tested. Precisa de gráficos? Recharts, Visx, Nivo -- escolha a sua. Precisa de auth? NextAuth.js (agora Auth.js) ou Supabase Auth. Você nunca fica preso esperando um desenvolvedor de plugin corrigir um bug.

Se você está considerando esse caminho, nosso time de desenvolvimento Next.js migrou vários apps Bubble e pode compartilhar especificidades sobre como o processo se parece.

Supabase Substitui o Backend do Bubble

Supabase é a coisa mais próxima de uma "substituição de backend Bubble" que existe. Aqui está o porquê:

  • Banco de dados PostgreSQL -- um banco de dados relacional real, queryable, indexable em vez da estrutura peculiar do Bubble
  • Row Level Security (RLS) -- defina quem pode ler/escrever quais dados no nível do banco de dados
  • Auth integrado -- email/password, magic links, provedores OAuth, tudo tratado
  • Subscrições em tempo real -- atualizações de dados ao vivo sem polling
  • Storage -- uploads de arquivo com entrega por CDN
  • Edge Functions -- funções serverless para lógica customizada

O preço do Supabase em 2026 é dramaticamente mais barato que o Bubble em escala:

Bubble (Crescimento) Supabase (Pro) + Vercel (Pro)
Custo base mensal $129 $25 + $20 = $45
Com 10K usuários $349+ (provável excedente) ~$75-150 (com uso)
Com 50K usuários $2.000-5.000+ ~$200-500
Com 100K usuários $5.000-12.000+ ~$400-1.200
Acesso ao banco de dados Queries proprietárias PostgreSQL completo
Código customizado Muito limitado Ilimitado

Esses números não são teóricos. Eles se baseiam em contas reais que vi de empresas com as quais trabalhei.

Saiu do Bubble? Como Migrar para Next.js e Supabase em 2026 - arquitetura

Comparação de Arquitetura: Bubble vs Next.js + Supabase

Vamos mapear os conceitos do Bubble para o novo stack para que você possa ver o que vai onde:

Conceito Bubble Equivalente Next.js + Supabase
Páginas Rotas/páginas Next.js (App Router)
Elementos Reutilizáveis Componentes React
Elementos Visuais JSX + Tailwind CSS / bibliotecas de componentes
Workflows API routes, Server Actions, Edge Functions
Database Things Tabelas PostgreSQL
Tipos de Dados & Campos Colunas de tabela com tipos apropriados
Regras de Privacidade Supabase Row Level Security (RLS)
Workflows Backend Supabase Edge Functions ou cron jobs
API Connector Chamadas nativas fetch/axios
Plugins Pacotes npm
Autenticação de usuário Supabase Auth ou Auth.js
Uploads de arquivo Supabase Storage
Agendamento pg_cron ou externo (Inngest, Trigger.dev)

O Playbook de Migração

Não tente reconstruir tudo de uma vez. Vi isso falhar espetacularmente. Aqui está a abordagem em fases que realmente funciona.

Fase 1: Auditoria e Planejamento (1-2 semanas)

Antes de escrever uma única linha de código, documente tudo que seu app Bubble faz. Quero dizer tudo:

  1. Mapeie cada página -- screenshots, fluxos de usuário, que dados cada página lê/escreve
  2. Catálogo todos os workflows -- lado do servidor e lado do cliente, o que os dispara, o que fazem
  3. Documente o modelo de dados -- cada tipo de dados, cada campo, cada relacionamento
  4. Liste todas as integrações -- Stripe, SendGrid, Twilio, qualquer plugin que você usa
  5. Identifique o que cortar -- Garanto que existem features que ninguém usa. Não migre peso morto.

Fase 2: Construir a Fundação (2-3 semanas)

Stand up do novo stack:

npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm install @supabase/supabase-js @supabase/ssr

Configure seu projeto Supabase, configure auth, crie seu schema de banco de dados. É aqui que você consegue consertar todos os erros de modelagem de dados que cometeu no Bubble. Aproveite foreign keys apropriadas, índices e tipos de dados.

Fase 3: Construir Features Principais (4-8 semanas)

Comece com as features que recebem mais tráfego. Construa-as apropriadamente em Next.js. Não tente replicar a UI exata do Bubble -- aproveite essa oportunidade para melhorar a UX.

Fase 4: Migrar Dados e Usuários (1-2 semanas)

Esta é a parte assustadora, e merece sua própria seção.

Fase 5: Fazer o Switch (1 semana)

Execute ambos os sistemas em paralelo, verifique se tudo funciona, depois mude o DNS. Mantenha o app Bubble rodando em modo somente leitura por algumas semanas como rede de segurança.

Migração de Dados: Saindo do Banco de Dados do Bubble

Bubble permite exportar seus dados como arquivos CSV. Esse é seu ponto de partida, mas não é tão limpo quanto você gostaria.

# Script Python de exemplo para transformar exportações CSV do Bubble
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 exporta datas em um formato estranho
        created = convert_bubble_date(row['Created Date'])
        
        # Bubble usa IDs únicos que parecem "1677234567890x123456789"
        # Você vai querer mapear esses para UUIDs
        user_data = {
            'legacy_bubble_id': row['unique id'],
            'email': row['email'],
            'name': row['name_text'],
            'created_at': created,
            # Mapear todos seus campos customizados
        }
        
        supabase.table('users').insert(user_data).execute()

Gotchas chave com exportações de dados do Bubble:

  • Relacionamentos são armazenados como IDs do Bubble -- você vai precisar construir uma tabela de mapeamento para converter esses para suas novas foreign keys
  • Campos de arquivo exportam como URLs de CDN do Bubble -- você precisa baixar esses arquivos e re-fazer upload para Supabase Storage antes do app Bubble desligar
  • Campos de lista exportam como IDs de Bubble separados por vírgula -- esses precisam se tornar tabelas de junção apropriadas
  • Formatos de data são inconsistentes -- teste seu parsing de data minuciosamente

Para a Data API do Bubble, você também pode puxar dados programaticamente, o que às vezes é mais fácil que exportações CSV para datasets grandes:

// Buscando dados da Data API do Bubble
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();
};

Reconstruindo Seu Frontend em Next.js

O editor visual do Bubble mapeia surpreendentemente bem para arquitetura baseada em componentes uma vez que você vê o padrão. Um "Elemento Reutilizável" do Bubble é literalmente um componente React. Um "Grupo" do Bubble é uma <div> com classes Tailwind.

Aqui está um padrão que uso para páginas que eram data-heavy no 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>
  );
}

Note como a busca de dados acontece no lado do servidor. Sem spinners de carregamento, sem requisições em cascata. A página chega totalmente renderizada. Isso sozinho faz o app se sentir dramaticamente mais rápido que a versão Bubble.

Para bibliotecas de componentes, tive ótimos resultados com shadcn/ui. Oferece componentes polidos e acessíveis que você possui (são copiados para seu codebase, não importados de um pacote). Combinado com Tailwind CSS, você consegue reconstruir UIs do Bubble rapidamente e serão mais responsivas e performáticas.

Configurando Supabase como Seu Backend

O Row Level Security do Supabase é seu substituto para as Regras de Privacidade do Bubble e, honestamente, é muito mais poderoso:

-- Deixe usuários apenas verem seus próprios dados
CREATE POLICY "Users can view own data"
  ON user_profiles FOR SELECT
  USING (auth.uid() = user_id);

-- Deixe usuários apenas atualizarem seus próprios perfis
CREATE POLICY "Users can update own profile"
  ON user_profiles FOR UPDATE
  USING (auth.uid() = user_id);

-- Deixe admins ver tudo
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'
    )
  );

Para workflows backend (coisas que rodavam em agendamento no Bubble), Supabase Edge Functions com pg_cron funcionam bem para a maioria dos casos de uso. Para agendamento de jobs mais complexo, Trigger.dev ou Inngest são excelentes escolhas que se integram naturalmente com Next.js.

Autenticação e Migração de Usuários

Esta é a parte mais tricky de toda a migração. Seus usuários têm senhas armazenadas no Bubble e você não consegue exportar hashes de senha. Você tem duas opções:

  1. Forçar reset de senha -- Envie para todos os usuários um email "atualizamos nossa plataforma" com um link de reset de senha. Simples mas cria atrito.
  2. Migração preguiçosa -- Configure um fluxo de auth customizado que, no primeiro login, tenta autenticar contra a API do Bubble. Se bem-sucedido, crie o usuário no Supabase com a senha que eles acabaram de digitar.

Opção 2 é mais trabalho mas uma experiência de usuário muito melhor. Aqui está a forma aproximada:

// app/api/auth/migrate-login/route.ts
export async function POST(request: Request) {
  const { email, password } = await request.json();
  
  // Tente Supabase primeiro
  const { data, error } = await supabase.auth.signInWithPassword({
    email, password
  });
  
  if (data.user) return Response.json({ success: true });
  
  // Se não estiver em Supabase, tente Bubble
  const bubbleAuth = await authenticateWithBubble(email, password);
  
  if (bubbleAuth.success) {
    // Crie usuário em Supabase com a mesma senha
    const { data: newUser } = await supabase.auth.admin.createUser({
      email,
      password,
      email_confirm: true,
    });
    
    // Migre seus dados de perfil
    await migrateUserProfile(bubbleAuth.userId, newUser.user.id);
    
    // Assine eles
    return Response.json({ success: true });
  }
  
  return Response.json({ error: 'Invalid credentials' }, { status: 401 });
}

Performance e Custo Após Migração

Aqui estão números reais de um SaaS de gerenciamento de projetos que ajudei a migrar no final de 2025:

Métrica No Bubble Após Migração
Tempo médio de carregamento de página 3,8s 0,9s
Time to Interactive 5,2s 1,4s
Lighthouse Performance 38 92
Custo de infraestrutura mensal $4.200 $187
Usuários ativos mensais 12.000 12.000
Tempo de resposta de API (p95) 1.800ms 180ms
Uptime (média de 3 meses) 99,2% 99,97%

A redução de custo sozinha justificou a migração dentro de dois meses. As melhorias de performance reduziram churn em um estimado 15% durante o trimestre seguinte.

Se você está olhando para esses números e pensando "eu quero isso mas não tenho o time de dev para fazer", esse é exatamente o tipo de projeto que tratamos. Confira nosso trabalho de desenvolvimento de headless CMS e apps ou entre em contato para uma avaliação de migração.

Armadilhas Comuns e Como Evitá-las

Tentar Replicar o Bubble Exatamente

Não faça. A forma do Bubble de fazer as coisas é geralmente a pior forma de fazer em um stack baseado em código. Use a migração como uma chance de repensar fluxos de usuário e arquitetura de dados.

Subestimar a Migração de Dados

Orce o dobro do tempo que você acha que vai precisar para migração de dados. As exportações de dados do Bubble terão casos extremos que vão te surpreender. Valores nulos onde você não esperava. Registros duplicados. Relacionamentos órfãos.

Esquecer Sobre Storage de Arquivo

Bubble hospeda seus arquivos uploadados em seu CDN. Quando você cancela seu plano Bubble, essas URLs morrem. Certifique-se de que cada arquivo é baixado e re-uploaded para Supabase Storage antes de fazer o switch.

Não Configurar Monitoramento Cedo

No Bubble, você não pensa em monitoramento porque não consegue realmente fazer nada sobre problemas de qualquer forma. No seu novo stack, configure Sentry para rastreamento de erro e Vercel Analytics (ou Plausible/PostHog) para monitoramento de performance desde o dia um.

Ir Sozinho Quando Não Deveria

Se seu app Bubble é complexo e crítico para receita, seriamente considere obter ajuda de um time que fez isso antes. O custo de uma migração mal feita -- dados perdidos, downtime, churn de usuários -- supera em muito o custo de ajuda profissional. Nossa página de preços tem detalhes sobre como engajamentos se parecem.

FAQ

Quanto tempo leva para migrar do Bubble para Next.js e Supabase?

Para um app SaaS típico com 10-30 páginas e complexidade moderada, espere 8-16 semanas para uma migração completa. Apps simples (landing page + dashboard + algumas features CRUD) podem ser feitos em 4-6 semanas. Apps complexos com muitas integrações, lógica customizada e datasets grandes podem levar 16-24 semanas. A migração de dados e transição de auth de usuários são geralmente o que levam mais tempo que esperado.

Consigo migrar do Bubble gradualmente ou tem que ser tudo de uma vez?

Você absolutamente consegue fazer gradualmente. Uma abordagem comum é construir o novo app Next.js ao lado do app Bubble, migrar features uma por uma e usar roteamento de subdomínio para enviar usuários para a versão certa. Por exemplo, seu novo dashboard vive em app.yoursite.com enquanto features legadas ainda rodam no Bubble. Apenas esteja ciente de que manter dois sistemas simultaneamente tem seus próprios custos.

E quanto a alternativas do Bubble como FlutterFlow, WeWeb ou Xano -- devo considerar aqueles em vez disso?

Se seu problema principal é o preço do Bubble mas você ainda quer uma abordagem no-code/low-code, ferramentas como WeWeb (frontend) + Xano (backend) podem funcionar. Mas você está trocando um vendor lock-in por outro. Se você está saindo do Bubble porque performance, escalabilidade ou tamanho de time, você eventualmente vai sair dessas ferramentas também. Mover para um stack baseado em código como Next.js + Supabase é um investimento uma vez que escala indefinidamente.

Quanto custa rodar um app Next.js + Supabase comparado ao Bubble?

Para a maioria dos apps SaaS, você está vendo $45-200/mês em Vercel + Supabase para o que custaria $349-5.000+/mês no Bubble. Supabase Pro é $25/mês, Vercel Pro é $20/mês. Em escala, seus custos crescem muito mais lentamente porque você está pagando por recursos de computação reais em vez de unidades de workflow. Uma regra aproximada: espere pagar 5-20% do que você estava pagando no Bubble.

Meu SEO será afetado pela migração?

Pode melhorar dramaticamente. Apps Bubble são client-rendered e lentos, o que prejudica pontuações de Core Web Vitals. Next.js suporta server-side rendering e static generation, o que significa carregamentos de página mais rápidos e melhor crawlability. Apenas certifique-se de configurar redirecionamentos 301 apropriados de suas URLs antigas do Bubble para as rotas novas do Next.js e você deveria ver melhorias de SEO dentro de algumas semanas.

Preciso saber PostgreSQL para usar Supabase?

Conhecimento básico de SQL ajuda muito, mas Supabase fornece um editor de tabela visual e uma biblioteca cliente JavaScript que abstrai a maioria das queries. Dito isso, entender SQL vai te tornar dramaticamente mais eficaz. Para queries complexas, relatórios e tuning de performance, conhecimento de SQL é essencial. Se seu time não tem experiência com SQL, este é um bom momento para investir em aprender -- é uma skill que pagará dividendos para sempre.

O que acontece com as integrações de API do meu app Bubble durante a migração?

Você vai precisar recriar cada integração no seu app Next.js. A boa notícia é que isso é geralmente muito mais fácil com código do que com o plugin API Connector do Bubble. Uma integração Stripe que exigia um plugin e 15 workflows no Bubble pode ser 50 linhas de código com o SDK Stripe Node.js. Faça uma lista completa de cada serviço externo com o qual seu app Bubble conversa e aborde um por um.

Posso usar o tier gratuito do Supabase para produção?

O tier gratuito do Supabase em 2026 oferece 500MB de armazenamento de banco de dados, 1GB de armazenamento de arquivo e 50.000 usuários ativos mensais em auth. Para produtos muito em estágio inicial, isso pode funcionar. Mas para qualquer app de produção sério, você vai querer o plano Pro em $25/mês para melhor performance, backups diários e nenhuma pausa de projeto após inatividade. Ainda é absurdamente barato comparado ao Bubble.