Tu factura mensual llega y el número te paraliza—$847 en unidades de flujo, de nuevo. Abres una pestaña nueva y escribes "alternativa a Bubble" en la barra de búsqueda. Tres fundadores hicieron exactamente esto antes de llamarnos el año pasado. Cada uno pensaba que se había metido en un callejón sin salida. No era así. Lo que realmente habían hecho era validar el product-market fit lo suficientemente fuerte como para que el modelo de precios basado en uso de Bubble no pudiera escalar con ellos. La migración a Next.js y Supabase tomó entre cuatro y nueve semanas, dependiendo de cuánta lógica personalizada vivía en sus flujos. Uno ahorró $640/mes para el mes dos. Otro redujo el tiempo de carga de página de 3.2 segundos a 680 milisegundos y vio su conversión de registros subir once puntos. Si tu aplicación Bubble funciona pero la economía unitaria no, estás a punto de ver exactamente cómo se divide la migración—con código real, cronogramas reales, y las tres decisiones que determinan si envías en cuatro semanas o cuatro meses.

Bubble es genuinamente excelente para sacar un MVP del terreno. He recomendado a fundadores en etapa temprana más veces de las que puedo contar. Pero hay un patrón que sigo viendo: el producto crece, el equipo crece, la base de usuarios crece—y de repente Bubble no crece contigo. Te está frenando. El modelo de precios de unidades de flujo (WU) que parecía bien con 1,000 usuarios se convierte en un problema serio a los 50,000. El editor visual que se sentía liberador comienza a sentirse como una jaula cuando necesitas lógica personalizada. Los tiempos de carga de página que eran "aceptables" se vuelven vergonzosos.

Este artículo es la guía de migración que desearía haber tenido la primera vez que hice esto. Vamos a hablar sobre por qué los equipos superan Bubble, cómo se ven los costos reales en 2026, y cómo ejecutar realmente una migración a Next.js y Supabase sin quemar tu empresa.

Tabla de Contenidos

¿Superaste Bubble? Cómo migrar a Next.js y Supabase en 2026

Por qué los equipos superan Bubble

Seamos específicos sobre qué significa realmente "superar", porque no es una cosa. Suele ser una combinación de varios puntos de fricción que se componen entre sí.

Muros de rendimiento

Las aplicaciones Bubble se ejecutan en una infraestructura compartida. Tu aplicación comparte recursos de cómputo con otras aplicaciones Bubble. Cuando tu aplicación obtiene picos de tráfico, no puedes simplemente girar más instancias—estás a merced de Bubble. He visto aplicaciones Bubble con 500+ usuarios simultáneos alcanzar tiempos de respuesta de 3-5 segundos para consultas de base de datos básicas. Eso no es un error; esa es la arquitectura.

Las páginas de Bubble también son pesadas. Una página típica de Bubble envía 2-4MB de JavaScript al cliente. Compáralo con una página Next.js bien construida que podría enviar 200-400KB. Tus usuarios sienten esa diferencia, especialmente en móvil.

El problema del plugin

El ecosistema de plugins de Bubble es tanto su fortaleza como su talón de Aquiles. Instalarás plugins para integración de Stripe, generación de PDF, envío de correos electrónicos—y cada uno es mantenido por un desarrollador aleatorio de terceros que podría abandonarlo el próximo martes. He visto aplicaciones de producción romperse porque un autor de plugin envió una mala actualización. No tienes control.

El bloqueo de proveedor es real

Toda tu aplicación—la lógica, los datos, la interfaz de usuario—vive dentro del sistema propietario de Bubble. No hay un botón "exportar mi aplicación". Tus flujos no son código; son configuraciones visuales almacenadas en el formato de Bubble. Si Bubble cambia su modelo de precios (que han hecho, múltiples veces), pagas más o empiezas de nuevo. Esa es una posición de negociación terrible para cualquier negocio.

Problemas de escalado de equipo

Intenta contratar un "desarrollador de Bubble" en 2026. El grupo de talentos es minúsculo comparado con desarrolladores de React/Next.js. El control de versiones en Bubble es primitivo comparado con Git. Tener múltiples desarrolladores trabajando en la misma aplicación Bubble simultáneamente es un ejercicio en frustración. No hay un proceso real de revisión de código, sin estrategia de ramificación, sin pipeline de CI/CD.

Verificación de realidad de precios de Bubble 2026

Bubble pasó al modelo de precios de unidades de flujo (WU) en 2023, y lo ha ajustado varias veces desde entonces. A principios de 2026, aquí es lo que estás mirando:

Plan Costo mensual Unidades de flujo Tasa WU del lado del servidor Tasa WU del lado del cliente
Gratuito $0 Limitado (solo prueba) N/A N/A
Inicio $32/mes 10,000 WU 1 WU por acción 0.2 WU por acción
Crecimiento $129/mes 50,000 WU 1 WU por acción 0.2 WU por acción
Equipo $349/mes 150,000 WU 1 WU por acción 0.2 WU por acción
Empresa Personalizado Personalizado Personalizado Personalizado
Excedente Por WU — $0.003/WU $0.003/WU

Aquí es donde se pone feo. Una aplicación SaaS moderadamente compleja con 10,000 usuarios activos puede quemar fácilmente 500,000-1,000,000 WU por mes. Esos son $1,050-$2,550 en cargos por excedente además del plan Equipo. He visto empresas pagando $3,000-$8,000/mes en Bubble para aplicaciones que podrían ejecutarse en $50-200/mes de infraestructura en la nube.

El modelo WU es particularmente castigador porque te cobra por cosas que serían esencialmente gratuitas en un stack personalizado. ¿Buscando en tu base de datos? Eso cuesta WU. ¿Programando un flujo recurrente? WU. ¿Enviando una notificación? WU. Cada llamada a API, cada verificación condicional en el lado del servidor—todo se suma.

Y aquí está la parte que realmente duele: el modelo de precios de Bubble solo se ha movido en una dirección. El modelo WU reemplazó el antiguo modelo de precios basado en capacidad, y muchos usuarios vieron sus facturas aumentar 2-5x de la noche a la mañana. No hay garantía de que no vuelva a suceder.

Por qué Next.js + Supabase es el movimiento

He evaluado docenas de estrategias de salida de Bubble a lo largo de los años. Rails, Django, Laravel, React simple con Firebase—todos son válidos. Pero para equipos que provienen específicamente de Bubble, la combinación Next.js + Supabase toca un punto dulce que es difícil de superar.

Next.js te da lo que Bubble no puede

Next.js 15 (la versión estable actual en 2026) te da renderizado del lado del servidor, generación estática, rutas de API, middleware, y funciones de borde, todo en un framework. Tus páginas cargan rápido porque solo envías el JavaScript que esa página realmente necesita. El App Router te da layouts, estados de carga, y límites de error que tomaría docenas de flujos de Bubble para aproximar.

Más importante aún, es React. El ecosistema de React es enorme. ¿Necesitas un selector de fecha? Hay 50 opciones probadas en batalla. ¿Necesitas gráficos? Recharts, Visx, Nivo—elige tu veneno. ¿Necesitas autenticación? NextAuth.js (ahora Auth.js) o Supabase Auth. Nunca estás atrapado esperando que un desarrollador de plugin corrija un error.

Si estás considerando este camino, nuestro equipo de desarrollo Next.js ha migrado varias aplicaciones Bubble y puede compartir detalles específicos sobre cómo se ve el proceso.

Supabase reemplaza el backend de Bubble

Supabase es lo más cercano a un "reemplazo de backend de Bubble" que existe. Aquí está el por qué:

  • Base de datos PostgreSQL—una verdadera base de datos relacional consultable e indexable en lugar de la estructura de datos peculiar de Bubble
  • Seguridad a nivel de fila (RLS)—define quién puede leer/escribir qué datos a nivel de base de datos
  • Autenticación integrada—correo electrónico/contraseña, enlaces mágicos, proveedores OAuth, todo manejado
  • Suscripciones en tiempo real—actualizaciones de datos en vivo sin encuesta
  • Almacenamiento—cargas de archivos con entrega en CDN
  • Funciones de borde—funciones sin servidor para lógica personalizada

El modelo de precios de Supabase en 2026 es dramáticamente más barato que Bubble a escala:

Bubble (Crecimiento) Supabase (Pro) + Vercel (Pro)
Costo base mensual $129 $25 + $20 = $45
A 10K usuarios $349+ (probable excedente) ~$75-150 (con uso)
A 50K usuarios $2,000-5,000+ ~$200-500
A 100K usuarios $5,000-12,000+ ~$400-1,200
Acceso a base de datos Consultas propietarias PostgreSQL completo
Código personalizado Muy limitado Ilimitado

Esos números no son teóricos. Se basan en facturas reales que he visto de empresas con las que he trabajado.

¿Superaste Bubble? Cómo migrar a Next.js y Supabase en 2026 - arquitectura

Comparación de arquitectura: Bubble vs Next.js + Supabase

Mapeemos los conceptos de Bubble al nuevo stack para que puedas ver dónde va cada cosa:

Concepto de Bubble Equivalente de Next.js + Supabase
Páginas Páginas/rutas de Next.js (App Router)
Elementos reutilizables Componentes React
Elementos visuales JSX + Tailwind CSS / librerías de componentes
Flujos Rutas de API, Acciones de servidor, Funciones de borde
Cosas de base de datos Tablas PostgreSQL
Tipos de datos y campos Columnas de tabla con tipos adecuados
Reglas de privacidad Seguridad a nivel de fila de Supabase (RLS)
Flujos de backend Funciones de borde de Supabase o trabajos cron
Conector de API Llamadas nativas de fetch/axios
Plugins Paquetes npm
Autenticación de usuario Supabase Auth o Auth.js
Cargas de archivo Almacenamiento de Supabase
Programación pg_cron o externo (Inngest, Trigger.dev)

El manual de migración

No intentes reconstruir todo de una vez. He visto eso fallar espectacularmente. Aquí está el enfoque por fases que realmente funciona.

Fase 1: Auditoría y plan (1-2 semanas)

Antes de escribir una sola línea de código, documenta todo lo que hace tu aplicación Bubble. Me refiero a todo:

  1. Mapea cada página—capturas de pantalla, flujos de usuario, qué datos lee/escribe cada página
  2. Cataloga todos los flujos—lado del servidor y lado del cliente, qué los dispara, qué hacen
  3. Documenta el modelo de datos—cada tipo de dato, cada campo, cada relación
  4. Lista todas las integraciones—Stripe, SendGrid, Twilio, los plugins que sea que estés usando
  5. Identifica qué cortar—Garantizo que hay características que nadie usa. No migres peso muerto.

Fase 2: Construir la base (2-3 semanas)

Monta el nuevo stack:

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

Configura tu proyecto de Supabase, configura la autenticación, crea tu esquema de base de datos. Aquí es donde obtienes la oportunidad de arreglar todos los errores de modelado de datos que cometiste en Bubble. Aprovecha las claves externas adecuadas, índices, y tipos de datos.

Fase 3: Construir características principales (4-8 semanas)

Comienza con las características que obtienen más tráfico. Constrúyelas correctamente en Next.js. No intentes replicar la interfaz exacta de Bubble—aprovecha esta oportunidad para mejorar la UX.

Fase 4: Migrar datos y usuarios (1-2 semanas)

Esta es la parte asustadiza, y merece su propia sección.

Fase 5: Cambiar (1 semana)

Ejecuta ambos sistemas en paralelo, verifica que todo funcione, luego cambia el DNS. Mantén la aplicación Bubble ejecutándose en modo de solo lectura durante algunas semanas como red de seguridad.

Migración de datos: Salir de la base de datos de Bubble

Bubble te permite exportar tus datos como archivos CSV. Ese es tu punto de partida, pero no es tan limpio como esperarías.

# Script Python de ejemplo para transformar exportaciones CSV de 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 fechas en un formato extraño
        created = convert_bubble_date(row['Created Date'])
        
        # Bubble usa IDs únicos que se ven como "1677234567890x123456789"
        # Querrás mapear estos a UUIDs
        user_data = {
            'legacy_bubble_id': row['unique id'],
            'email': row['email'],
            'name': row['name_text'],
            'created_at': created,
            # Mapea todos tus campos personalizados
        }
        
        supabase.table('users').insert(user_data).execute()

Gotchas clave con exportaciones de datos de Bubble:

  • Las relaciones se almacenan como IDs de Bubble—necesitarás construir una tabla de mapeo para convertir estos a tus nuevas claves externas
  • Los campos de archivo se exportan como URLs de CDN de Bubble—necesitas descargar estos archivos y re-subirlos a Almacenamiento de Supabase antes de que la aplicación Bubble se desconecte
  • Los campos de lista se exportan como IDs de Bubble separados por comas—estos necesitan convertirse en tablas de unión adecuadas
  • Los formatos de fecha son inconsistentes—prueba tu análisis de fecha minuciosamente

Para la API de datos de Bubble, también puedes extraer datos de forma programática, lo que a veces es más fácil que exportaciones CSV para conjuntos de datos grandes:

// Obtención de datos de la API de datos de Bubble
const fetchBubbleData = async (type, cursor = 0) => {
  const response = await fetch(
    `https://tuapp.bubbleapps.io/api/1.1/obj/${type}?cursor=${cursor}&limit=100`,
    {
      headers: {
        'Authorization': `Bearer ${BUBBLE_API_KEY}`
      }
    }
  );
  return response.json();
};

Reconstruir tu frontend en Next.js

El editor visual de Bubble se mapea sorprendentemente bien a la arquitectura basada en componentes una vez que ves el patrón. Un "elemento reutilizable" de Bubble es literalmente un componente React. Un "grupo" de Bubble es un <div> con clases Tailwind.

Aquí hay un patrón que uso para páginas que eran intensivas en datos en 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">Panel de control</h1>
      <DashboardStats stats={stats} />
      <RecentActivity items={activity} />
    </div>
  );
}

Observa cómo la obtención de datos ocurre del lado del servidor. Sin spinners de carga, sin solicitudes en cascada. La página llega completamente renderizada. Esto solo hace que la aplicación se sienta dramáticamente más rápida que la versión Bubble.

Para librerías de componentes, he tenido excelentes resultados con shadcn/ui. Te proporciona componentes pulidos y accesibles que posees (se copian en tu base de código, no se importan de un paquete). Combinado con Tailwind CSS, puedes reconstruir interfaces de usuario de Bubble rápidamente y serán más receptivas y eficientes.

Configurar Supabase como tu backend

La seguridad a nivel de fila de Supabase es tu reemplazo para las reglas de privacidad de Bubble, y honestamente, es mucho más poderosa:

-- Solo dejar que los usuarios vean sus propios datos
CREATE POLICY "Users can view own data"
  ON user_profiles FOR SELECT
  USING (auth.uid() = user_id);

-- Solo dejar que los usuarios actualicen sus propios perfiles
CREATE POLICY "Users can update own profile"
  ON user_profiles FOR UPDATE
  USING (auth.uid() = user_id);

-- Dejar que los administradores vean todo
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 flujos de trabajo de backend (cosas que se ejecutaban en un cronograma en Bubble), Supabase Edge Functions con pg_cron funcionan bien para la mayoría de casos de uso. Para programación de trabajos más compleja, Trigger.dev o Inngest son opciones excelentes que se integran naturalmente con Next.js.

Autenticación y migración de usuarios

Esta es la parte más complicada de toda la migración. Tus usuarios tienen contraseñas almacenadas en Bubble, y no puedes exportar hashes de contraseña. Tienes dos opciones:

  1. Forzar restablecimiento de contraseña—Envía a todos los usuarios un correo electrónico "hemos mejorado nuestra plataforma" con un enlace de restablecimiento de contraseña. Simple pero crea fricción.
  2. Migración perezosa—Configura un flujo de autenticación personalizado que, en el primer inicio de sesión, intente autenticarse contra la API de Bubble. Si tiene éxito, crea el usuario en Supabase con la contraseña que acaban de ingresar.

La opción 2 es más trabajo pero una experiencia de usuario mucho mejor. Aquí está la forma aproximada:

// app/api/auth/migrate-login/route.ts
export async function POST(request: Request) {
  const { email, password } = await request.json();
  
  // Intenta Supabase primero
  const { data, error } = await supabase.auth.signInWithPassword({
    email, password
  });
  
  if (data.user) return Response.json({ success: true });
  
  // Si no está en Supabase, intenta Bubble
  const bubbleAuth = await authenticateWithBubble(email, password);
  
  if (bubbleAuth.success) {
    // Crea usuario en Supabase con la misma contraseña
    const { data: newUser } = await supabase.auth.admin.createUser({
      email,
      password,
      email_confirm: true,
    });
    
    // Migra sus datos de perfil
    await migrateUserProfile(bubbleAuth.userId, newUser.user.id);
    
    // Inicia sesión
    return Response.json({ success: true });
  }
  
  return Response.json({ error: 'Invalid credentials' }, { status: 401 });
}

Rendimiento y costo después de la migración

Aquí están números reales de una aplicación SaaS de gestión de proyectos que ayudé a migrar a finales de 2025:

Métrica En Bubble Después de la migración
Tiempo promedio de carga de página 3.8s 0.9s
Tiempo hasta interactividad 5.2s 1.4s
Rendimiento de Lighthouse 38 92
Costo de infraestructura mensual $4,200 $187
Usuarios activos mensuales 12,000 12,000
Tiempo de respuesta de API (p95) 1,800ms 180ms
Tiempo de actividad (promedio 3 meses) 99.2% 99.97%

La reducción de costos por sí sola justificó la migración dentro de dos meses. Las mejoras de rendimiento redujeron la rotación en aproximadamente un 15% durante el trimestre siguiente.

Si estás viendo estos números y pensando "quiero eso pero no tengo el equipo de desarrollo para hacerlo", ese es exactamente el tipo de proyecto que manejamos. Consulta nuestro trabajo de desarrollo de aplicaciones y CMS sin cabeza o ponte en contacto para una evaluación de migración.

Trampas comunes y cómo evitarlas

Intentar replicar Bubble exactamente

No lo hagas. La forma de Bubble de hacer las cosas a menudo es la peor forma de hacerlo en un stack basado en código. Usa la migración como una oportunidad para replantear flujos de usuario y arquitectura de datos.

Subestimar la migración de datos

Presupuesta el doble de tiempo de lo que crees que necesitas para la migración de datos. Las exportaciones de datos de Bubble tendrán casos extremos que te sorprenderán. Valores nulos donde no los esperabas. Registros duplicados. Relaciones huérfanas.

Olvidar el almacenamiento de archivos

Bubble aloja tus archivos cargados en su CDN. Cuando cancelas tu plan de Bubble, esas URL mueren. Asegúrate de que cada archivo se descargue y se re-suba a Almacenamiento de Supabase antes de cambiar el switch.

No configurar monitoreo temprano

En Bubble, no piensas en monitoreo porque realmente no puedes hacer nada al respecto de cualquier manera. En tu nuevo stack, configura Sentry para rastreo de errores y Vercel Analytics (o Plausible/PostHog) para monitoreo de rendimiento desde el primer día.

Ir solo cuando no deberías

Si tu aplicación Bubble es compleja y crítica para los ingresos, considera seriamente obtener ayuda de un equipo que haya hecho esto antes. El costo de una migración fallida—pérdida de datos, tiempo de inactividad, rotación de usuarios—supera con creces el costo de ayuda profesional.

Preguntas frecuentes

¿Cuánto tiempo tarda migrar de Bubble a Next.js y Supabase?

Para una aplicación SaaS típica con 10-30 páginas y complejidad moderada, espera 8-16 semanas para una migración completa. Las aplicaciones simples (página de destino + panel de control + algunas características CRUD) se pueden hacer en 4-6 semanas. Las aplicaciones complejas con muchas integraciones, lógica personalizada, y grandes conjuntos de datos pueden tomar 16-24 semanas. La migración de datos y la transición de autenticación de usuario suelen ser lo que toma más tiempo de lo esperado.

¿Puedo migrar desde Bubble gradualmente, o tiene que ser todo de una vez?

Puedes hacerlo gradualmente de manera absoluta. Un enfoque común es construir la nueva aplicación Next.js junto a la aplicación Bubble, migrar características una a la vez, y usar enrutamiento de subdominio para enviar usuarios a la versión correcta. Por ejemplo, tu nuevo panel de control vive en app.tusite.com mientras que características antiguas todavía se ejecutan en Bubble. Solo ten en cuenta que mantener dos sistemas simultáneamente tiene sus propios costos.

¿Qué hay de alternativas a Bubble como FlutterFlow, WeWeb, o Xano—debería considerar esos en su lugar?

Si tu problema principal es el modelo de precios de Bubble pero aún quieres un enfoque sin código/bajo código, herramientas como WeWeb (frontend) + Xano (backend) pueden funcionar. Pero estás intercambiando un bloqueo de proveedor por otro. Si superas Bubble porque el rendimiento, escalabilidad, o tamaño del equipo, eventualmente superarás esas herramientas también. Pasar a un stack basado en código como Next.js + Supabase es una inversión única que escala indefinidamente.

¿Cuánto cuesta ejecutar una aplicación Next.js + Supabase comparado con Bubble?

Para la mayoría de aplicaciones SaaS, estás viendo $45-200/mes en Vercel + Supabase para lo que costaría $349-5,000+/mes en Bubble. Supabase Pro es $25/mes, Vercel Pro es $20/mes. A escala, tus costos crecen mucho más lentamente porque estás pagando por recursos de cómputo reales en lugar de unidades de flujo. Una regla general aproximada: espera pagar 5-20% de lo que estabas pagando en Bubble.

¿Se verá afectado mi SEO por la migración?

Puede mejorar dramáticamente. Las aplicaciones Bubble se procesan en el cliente y son lentas, lo que daña las puntuaciones de Core Web Vitals. Next.js soporta renderizado del lado del servidor y generación estática, lo que significa cargas más rápidas y mejores rastreabilidad. Solo asegúrate de configurar redirecciones 301 adecuadas de tus URL antiguas de Bubble a las nuevas rutas de Next.js, y deberías ver mejoras de SEO dentro de algunas semanas.

¿Necesito saber PostgreSQL para usar Supabase?

El conocimiento básico de SQL ayuda mucho, pero Supabase proporciona un editor de tabla visual y una librería de cliente JavaScript que abstrae la mayoría de las consultas. Dicho esto, entender SQL te hará dramáticamente más efectivo. Para consultas complejas, reportes, y optimización de rendimiento, el conocimiento de SQL es esencial. Si tu equipo no tiene experiencia en SQL, este es un buen momento para invertir en aprenderlo—es una habilidad que paga dividendos para siempre.

¿Qué sucede con las integraciones de API de mi aplicación Bubble durante la migración?

Necesitarás recrear cada integración en tu aplicación Next.js. La buena noticia es que esto suele ser mucho más fácil con código que con el plugin API Connector de Bubble. Una integración de Stripe que requería un plugin y 15 flujos en Bubble podría ser 50 líneas de código con el SDK de Node.js de Stripe. Haz una lista completa de cada servicio externo con el que habla tu aplicación Bubble y abórdalo uno a la vez.

¿Puedo usar la capa gratuita de Supabase para producción?

La capa gratuita de Supabase en 2026 te da 500MB de almacenamiento de base de datos, 1GB de almacenamiento de archivo, y 50,000 usuarios activos mensuales en autenticación. Para productos en etapa muy temprana, esto puede funcionar. Pero para cualquier aplicación de producción seria, querrás el plan Pro a $25/mes para mejor rendimiento, copias de seguridad diarias, y sin pausa de proyecto después de inactividad. Sigue siendo absurdamente barato comparado con Bubble.