Ik heb drie bedrijven helpen migreren van Bubble in het afgelopen jaar. Elk ervan begon op dezelfde manier: iemand in het team opende zijn maandelijkse factuur, zag een getal dat hun maag deed omdraaien, en begon te googelen naar "Bubble alternatief." Als jij nu in die situatie zit, haal diep adem. Je bent niet alleen, en dit is eigenlijk op te lossen.

Bubble is echt geweldig voor het snel uitbrengen van een MVP. Ik heb het meer keren aanbevolen aan ondernemers in een vroeg stadium dan ik kan tellen. Maar ik zie steeds hetzelfde patroon: het product groeit, het team groeit, de gebruikersbasis groeit -- en plotseling groeit Bubble niet mee met je. Het houdt je tegen. Het workflow unit (WU) prijsmodel dat prima leek bij 1.000 gebruikers wordt een serieus probleem bij 50.000. De visuele editor die bevrijdend voelde, voelt als een kooi wanneer je aangepaste logica nodig hebt. De laadtijden van pagina's die "acceptabel" waren, worden beschamend.

Dit artikel is de migratiegids die ik had willen hebben toen ik dit voor het eerst deed. We gaan bespreken waarom teams Bubble uitgroeien, hoe de echte kosten er in 2026 uitzien, en hoe je een migratie naar Next.js en Supabase daadwerkelijk uit te voeren zonder je bedrijf aan gort te helpen.

Inhoudsopgave

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

Waarom teams Bubble uitgroeien

Laten we specifiek zijn over wat "uitgroeien" eigenlijk betekent, want het is niet één ding. Het is meestal een combinatie van meerdere pijnpunten die elkaar verergeren.

Prestatiemuren

Bubble-apps draaien op gedeelde infrastructuur. Je app deelt computerbronnen met andere Bubble-apps. Wanneer je app verkeersspitzen krijgt, kun je niet zomaar meer instanties opdraaien -- je bent afhankelijk van Bubble. Ik heb Bubble-apps gezien met 500+ gelijktijdige gebruikers die responsetijden van 3-5 seconden hebben voor basale databasequery's. Dat is geen bug; dat is de architectuur.

Bubble-pagina's zijn ook zwaar. Een typische Bubble-pagina stuurt 2-4MB JavaScript naar de client. Vergelijk dat met een goed gebouwde Next.js-pagina die misschien 200-400KB stuurt. Je gebruikers voelen dat verschil, vooral op mobiel.

Het plugin-probleem

Bubble's pluginecosysteem is zowel zijn sterkte als zijn Achilleshiel. Je installeert plugins voor Stripe-integratie, voor PDF-generatie, voor het versturen van e-mails -- en elk ervan wordt onderhouden door een willekeurige derde partij die volgende dinsdag kan stoppen. Ik heb productie-apps zien breken omdat een plugin-auteur een slechte update pustte. Je hebt er geen controle over.

Vendor lock-in is echt

Je volledige applicatie -- de logica, de data, de UI -- leeft in Bubbles propriëtaire systeem. Er is geen "mijn app exporteren"-knop. Je workflows zijn geen code; het zijn visuele configuraties die in Bubbles formaat zijn opgeslagen. Als Bubble hun prijzen verandert (wat ze hebben gedaan, meerdere keren), betaal je meer of begin je opnieuw. Dat is een afschuwelijke onderhandelingspositie voor elk bedrijf.

Problemen met teamschaal

Probeer in 2026 een "Bubble-ontwikkelaar" aan te nemen. De talentpool is minuscuul vergeleken met React/Next.js-ontwikkelaars. Versiebeheer in Bubble is primitief vergeleken met Git. Meerdere ontwikkelaars tegelijk aan dezelfde Bubble-app laten werken is frustrerend. Er is geen echt codereviewproces, geen branchingstrategie, geen CI/CD-pipeline.

Bubbles prijsrealiteit van 2026

Bubble ging in 2023 over naar workflow unit (WU)-prijzen en heeft dit sindsdien meerdere keren aangepast. Vanaf begin 2026 ziet het er als volgt uit:

Plan Maandelijkse kosten Workflow Units Server-Side WU-tarief Client-Side WU-tarief
Free $0 Beperkt (alleen testen) N/A N/A
Starter $32/maand 10.000 WU 1 WU per actie 0,2 WU per actie
Growth $129/maand 50.000 WU 1 WU per actie 0,2 WU per actie
Team $349/maand 150.000 WU 1 WU per actie 0,2 WU per actie
Enterprise Aangepast Aangepast Aangepast Aangepast
Overage Per WU — $0,003/WU $0,003/WU

Dit is waar het lelijk wordt. Een matig complexe SaaS-app met 10.000 actieve gebruikers kan gemakkelijk 500.000-1.000.000 WU's per maand verbruiken. Dat is $1.050-$2.550 in overagekosten bovenop het Team-plan. Ik heb bedrijven gezien die $3.000-$8.000/maand op Bubble betaalden voor apps die op $50-200/maand cloudinfrastructuur konden draaien.

Het WU-model is bijzonder straf omdat het je aanrekent voor dingen die gratis zouden zijn in een aangepaste stack. Je database doorzoeken? Dat kost WU's. Een terugkerende workflow plannen? WU's. Een notificatie versturen? WU's. Elke API-aanroep, elke voorwaardelijke controle aan de serverzijde -- het loopt allemaal op.

En hier is het onderdeel dat echt pijn doet: Bubbles prijzen zijn alleen in één richting bewogen. Het WU-model vervolgde de oude capaciteitsgebaseerde prijzen, en veel gebruikers zagen hun rekeningen 2-5x stijgen van de ene dag op de andere. Er is geen garantie dat het niet opnieuw gebeurt.

Waarom Next.js + Supabase het juiste keuze is

Ik heb in de loop der jaren tientallen Bubble-uitstapstrategieën geëvalueerd. Rails, Django, Laravel, gewoon React met Firebase -- het zijn allemaal geldig. Maar voor teams die van Bubble wegkomen, raakt de combinatie Next.js + Supabase een sweet spot die moeilijk te verslaan is.

Next.js geeft je wat Bubble niet kan

Next.js 15 (de huidige stabiele versie in 2026) geeft je server-side rendering, static generation, API routes, middleware en edge functions allemaal in één framework. Je pagina's laden snel omdat je alleen het JavaScript stuurt dat de pagina daadwerkelijk nodig heeft. De App Router geeft je layouts, loadingtoestanden en error boundaries die tientallen Bubble-workflows zouden vergen om te benaderen.

Nog belangrijker: het is React. Het React-ecosysteem is enorm. Heb je een datumkiezer nodig? Er zijn 50 battle-tested opties. Heb je grafieken nodig? Recharts, Visx, Nivo -- kies naar keuze. Heb je auth nodig? NextAuth.js (nu Auth.js) of Supabase Auth. Je zit nooit vast te wachten tot een plugin-ontwikkelaar een bug oploost.

Als je dit pad overweegt, heeft ons Next.js-ontwikkelingsteam verschillende Bubble-apps gemigreerd en kan specifieke informatie delen over hoe het proces eruitziet.

Supabase vervangt Bubbles backend

Supabase is het dichtstbijzijnde aan een "Bubble backend-vervanging" die bestaat. Hier is waarom:

  • PostgreSQL-database -- een echte, querybare, indexeerbare relationele database in plaats van Bubbles vreemde datastructuur
  • Row Level Security (RLS) -- definieer wie data op databaseniveau mag lezen/schrijven
  • Auth ingebouwd -- email/wachtwoord, magische links, OAuth-providers, alles afgehandeld
  • Realtime-abonnementen -- live gegevensupdates zonder polling
  • Storage -- bestandsuploads met CDN-bezorging
  • Edge Functions -- serverloze functies voor aangepaste logica

Supabase's prijzen in 2026 zijn dramatisch goedkoper dan Bubble op schaal:

Bubble (Growth) Supabase (Pro) + Vercel (Pro)
Maandelijkse basiskosten $129 $25 + $20 = $45
Bij 10K gebruikers $349+ (overage waarschijnlijk) ~$75-150 (met gebruik)
Bij 50K gebruikers $2.000-5.000+ ~$200-500
Bij 100K gebruikers $5.000-12.000+ ~$400-1.200
Databasetoegang Propriëtaire query's Volledige PostgreSQL
Aangepaste code Zeer beperkt Onbeperkt

Die nummers zijn niet theoretisch. Ze zijn gebaseerd op echte rekeningen van bedrijven waarmee ik heb gewerkt.

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

Architectuur vergelijking: Bubble vs Next.js + Supabase

Laten we Bubble's concepten toewijzen aan de nieuwe stack zodat je kunt zien waar alles heen gaat:

Bubble-concept Next.js + Supabase-equivalent
Pagina's Next.js pagina's/routes (App Router)
Herbruikbare elementen React-componenten
Visuele elementen JSX + Tailwind CSS / componentbibliotheken
Workflows API routes, Server Actions, Edge Functions
Database Things PostgreSQL-tabellen
Gegevenstypes & velden Tabelkolommen met juiste typen
Privacyregels Supabase Row Level Security (RLS)
Backend-workflows Supabase Edge Functions of cronjobs
API Connector Native fetch/axios-aanroepen
Plugins npm-pakketten
Gebruikersauth Supabase Auth of Auth.js
Bestandsuploads Supabase Storage
Planning pg_cron of extern (Inngest, Trigger.dev)

Het migratiehandboek

Probeer niet alles tegelijk opnieuw op te bouwen. Ik heb gezien dat dit spectaculair mislukt. Hier is de gefaseerde aanpak die echt werkt.

Fase 1: Controle en planning (1-2 weken)

Documenteer alles wat je Bubble-app doet voordat je ook maar één regel code schrijft. Ik bedoel alles:

  1. Map elke pagina -- screenshots, gebruikersstromen, welke data elke pagina leest/schrijft
  2. Catalogiseer alle workflows -- server-side en client-side, wat triggert ze, wat doen ze
  3. Documenteer het datamodel -- elk gegevenstype, elk veld, elke relatie
  4. Noteer alle integraties -- Stripe, SendGrid, Twilio, welke plugins je ook gebruikt
  5. Identificeer wat weg moet -- Ik garandeer dat er functies zijn die niemand gebruikt. Migreer geen dode gewicht.

Fase 2: Bouw het fundament (2-3 weken)

Zet de nieuwe stack op:

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

Stel je Supabase-project in, configureer auth, maak je databaseschema. Dit is waar je al je datamodelleringsfouten uit Bubble kunt corrigeren. Profiteer van juiste foreign keys, indexen en gegevenstypes.

Fase 3: Bouw kernfuncties (4-8 weken)

Begin met de functies die het meest verkeer krijgen. Bouw ze correct in Next.js. Probeer niet Bubbles exacte UI te repliceren -- gebruik deze gelegenheid om de UX te verbeteren.

Fase 4: Migreer data en gebruikers (1-2 weken)

Dit is het enge deel, en het verdient een eigen sectie.

Fase 5: Schakel over (1 week)

Voer beide systemen parallel uit, controleer of alles werkt, flip vervolgens de DNS. Laat de Bubble-app een paar weken als veiligheidsnet in read-only modus draaien.

Datamigratie: Bubble's database verlaten

Bubble laat je je data als CSV-bestanden exporteren. Dat is je startpunt, maar het is niet zo schoon als je hoopt.

# Voorbeeldpython-script voor het transformeren van Bubble CSV-exports
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 exporteert data in een vreemd formaat
        created = convert_bubble_date(row['Created Date'])
        
        # Bubble gebruikt unieke ID's die eruitzien als "1677234567890x123456789"
        # Je wilt deze graag toewijzen aan UUID's
        user_data = {
            'legacy_bubble_id': row['unique id'],
            'email': row['email'],
            'name': row['name_text'],
            'created_at': created,
            # Map al je aangepaste velden
        }
        
        supabase.table('users').insert(user_data).execute()

Sleutelvalkuilen met Bubble-data-exports:

  • Relaties worden opgeslagen als Bubble-ID's -- je moet een toewijzingstabel bouwen om deze om te zetten naar je nieuwe foreign keys
  • Bestandsvelden exporteren als Bubble CDN-URL's -- je moet deze bestanden downloaden en opnieuw uploaden naar Supabase Storage voordat de Bubble-app offline gaat
  • Lijstvelden exporteren als door komma's gescheiden Bubble-ID's -- deze moeten juiste junctietabellen worden
  • Datumformaten zijn inconsistent -- test je datumparse uitgebreid

Voor de Bubble Data API kun je ook gegevens programmatisch ophalen, wat soms gemakkelijker is dan CSV-exports voor grote datasets:

// Gegevens ophalen van Bubble's 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();
};

Je frontend opnieuw bouwen in Next.js

Bubbles visuele editor wijst opmerkelijk goed toe aan op componenten gebaseerde architectuur als je het patroon eenmaal ziet. Een Bubble "Reusable Element" is letterlijk een React-component. Een Bubble "Group" is een <div> met Tailwind-klassen.

Hier is een patroon dat ik gebruik voor pagina's die data-zwaar waren in 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>
  );
}

Merk op hoe het ophalen van gegevens aan de serverzijde gebeurt. Geen laadspinners, geen waterfall-aanvragen. De pagina arriveert volledig gerenderd. Dit alleen al maakt de app dramatisch sneller voelen dan de Bubble-versie.

Voor componentbibliotheken heb ik goede resultaten met shadcn/ui. Het geeft je gepolijste, toegankelijke componenten die je bezit (ze worden in je codebase gekopieerd, niet geïmporteerd uit een pakket). Gecombineerd met Tailwind CSS, kun je Bubble-UI's snel opnieuw opbouwen en ze zullen reactiever en beter presteren.

Supabase opzetten als je backend

Supabase's Row Level Security is je vervanging voor Bubbles privacyregels, en eerlijk gezegd is het veel krachtiger:

-- Laat gebruikers alleen hun eigen gegevens zien
CREATE POLICY "Users can view own data"
  ON user_profiles FOR SELECT
  USING (auth.uid() = user_id);

-- Laat gebruikers alleen hun eigen profiel bijwerken
CREATE POLICY "Users can update own profile"
  ON user_profiles FOR UPDATE
  USING (auth.uid() = user_id);

-- Laat admins alles zien
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'
    )
  );

Voor backend-workflows (dingen die op een schema in Bubble liepen), werken Supabase Edge Functions met pg_cron goed voor de meeste use cases. Voor complexere jobtaken zijn Trigger.dev of Inngest uitstekende keuzes die natuurlijk integreren met Next.js.

Authenticatie en gebruikersmigratie

Dit is het lastigste onderdeel van de hele migratie. Je gebruikers hebben wachtwoorden opgeslagen in Bubble, en je kunt wachtwoordhashes niet exporteren. Je hebt twee opties:

  1. Dwing wachtwoordreset af -- Stuur alle gebruikers een "we hebben ons platform geüpgraded"-e-mail met een wachtwoordresetlink. Eenvoudig maar creëert wrijving.
  2. Luie migratie -- Stel een aangepaste auth-flow in die, bij eerste aanmelding, probeert te authenticeren tegen Bubble's API. Indien geslaagd, maak je de gebruiker in Supabase aan met het wachtwoord dat ze zojuist hebben ingevoerd.

Optie 2 is meer werk maar een veel betere gebruikerservaring. Hier is de ruwe vorm:

// app/api/auth/migrate-login/route.ts
export async function POST(request: Request) {
  const { email, password } = await request.json();
  
  // Probeer eerst Supabase
  const { data, error } = await supabase.auth.signInWithPassword({
    email, password
  });
  
  if (data.user) return Response.json({ success: true });
  
  // Indien niet in Supabase, probeer Bubble
  const bubbleAuth = await authenticateWithBubble(email, password);
  
  if (bubbleAuth.success) {
    // Maak gebruiker in Supabase aan met hetzelfde wachtwoord
    const { data: newUser } = await supabase.auth.admin.createUser({
      email,
      password,
      email_confirm: true,
    });
    
    // Migreer hun profielgegevens
    await migrateUserProfile(bubbleAuth.userId, newUser.user.id);
    
    // Meld ze aan
    return Response.json({ success: true });
  }
  
  return Response.json({ error: 'Invalid credentials' }, { status: 401 });
}

Prestaties en kosten na migratie

Hier zijn echte getallen van een projectmanagementsoftware waarmee ik eind 2025 geholpen heb migreren:

Metriek Op Bubble Na migratie
Gemiddelde paginalaadtijd 3,8s 0,9s
Tijd tot interactief 5,2s 1,4s
Lighthouse-prestaties 38 92
Maandelijkse infrastructuurkosten $4.200 $187
Maandelijkse actieve gebruikers 12.000 12.000
API-responstijd (p95) 1.800ms 180ms
Uptime (3-maands gemiddelde) 99,2% 99,97%

De kostenbesparing alleen rechtvaardigt de migratie binnen twee maanden. De prestatieverbeteringen hebben de churn geschat met 15% in het volgende kwartaal verminderd.

Als je naar deze nummers kijkt en denkt "dat wil ik maar ik heb niet het ontwikkelingsteam om dit uit te voeren," dat is precies het soort project dat we afhandelen. Bekijk ons headless CMS- en app-ontwikkelingwerk of neem contact op voor een migratieassessment.

Veelgemaakte fouten en hoe ze te vermijden

Proberen Bubble exact te repliceren

Doe dat niet. Bubbles manier van doen is vaak de slechtste manier in een code-based stack. Gebruik de migratie als gelegenheid om gebruikersstromen en data-architectuur opnieuw te doordenken.

Onderestimeren van datamigratie

Budget twee keer zo lang voor datamigratie als je denkt te nodig te hebben. Bubble's data-exports hebben edge cases die je zullen verrassen. Null-waarden waar je ze niet verwacht. Dubbele records. Weesgerelateerde gegevens.

Bestandsopslag vergeten

Bubble host je geüploade bestanden op hun CDN. Wanneer je je Bubble-abonnement opzegt, sterven die URL's. Zorg ervoor dat elk bestand wordt gedownload en opnieuw geüpload naar Supabase Storage voordat je omschakelt.

Geen monitoring vroeg instellen

In Bubble denk je niet aan monitoring omdat je toch niets aan problemen kunt doen. In je nieuwe stack stel je Sentry in voor foutopsporing en Vercel Analytics (of Plausible/PostHog) voor prestatiebewaking vanaf dag één.

Alleen verdergaan wanneer je dat niet moet doen

Als je Bubble-app complex is en voor inkomsten kritiek, overweeg serieus hulp te krijgen van een team dat dit eerder heeft gedaan. De kosten van een mislukte migratie -- verloren data, downtime, gebruikersverlies -- overtreffen de kosten van professionele hulp. Ons prijspagina heeft details over hoe overeenkomsten eruitzien.

Veelgestelde vragen

Hoe lang duurt het om van Bubble naar Next.js en Supabase te migreren?

Voor een typische SaaS-app met 10-30 pagina's en matig complexiteit, verwacht 8-16 weken voor een volledige migratie. Eenvoudige apps (landingspagina + dashboard + enkele CRUD-functies) kunnen in 4-6 weken klaar zijn. Complexe apps met veel integraties, aangepaste logica en grote datasets kunnen 16-24 weken duren. Datamigratie en gebruikersauth-overgang zijn meestal wat langer duurt dan verwacht.

Kan ik geleidelijk van Bubble migreren, of moet het in één keer?

Je kunt het absoluut geleidelijk doen. Een veelvoorkomende aanpak is om de nieuwe Next.js-app naast de Bubble-app op te bouwen, functies één voor één te migreren, en subdomeinrouting te gebruiken om gebruikers naar de juiste versie te sturen. Bijvoorbeeld, je nieuwe dashboard leeft op app.yoursite.com terwijl legacy-functies nog steeds op Bubble draaien. Wees je wel bewust dat het onderhouden van twee systemen tegelijk zijn eigen kosten heeft.

Wat dacht je van Bubble-alternatieven zoals FlutterFlow, WeWeb, of Xano -- zou ik die in plaats daarvan moeten overwegen?

Als je belangrijkste probleem Bubbles prijzen is maar je nog steeds een no-code/low-code benadering wilt, tools zoals WeWeb (frontend) + Xano (backend) kunnen werken. Maar je verhandelt één vendor lock-in voor een ander. Als je Bubble uitgroeit vanwege prestaties, schaalbaarheid, of teamgrootte, zul je die tools uiteindelijk ook uitgroeien. Overstappen naar een code-based stack zoals Next.js + Supabase is een eenmalige investering die oneindig schaalt.

Hoeveel kost het om een Next.js + Supabase-app uit te voeren vergeleken met Bubble?

Voor de meeste SaaS-apps betaal je $45-200/maand op Vercel + Supabase voor wat $349-5.000+/maand zou kosten op Bubble. Supabase Pro is $25/maand, Vercel Pro is $20/maand. Op schaal groeien je kosten veel langzamer omdat je betaalt voor daadwerkelijke computerbronnen in plaats van workflow units. Een ruw vuistregel: verwacht 5-20% van wat je op Bubble betaalde.

Wordt mijn SEO beïnvloed door de migratie?

Het kan drastisch verbeteren. Bubble-apps worden aan de client-side gerenderd en zijn langzaam, wat Core Web Vitals-scores schaadt. Next.js ondersteunt server-side rendering en static generation, wat snellere paginalaadtijden en betere crawlbaarheid betekent. Zorg ervoor dat je juiste 301-redirects van je oude Bubble-URL's naar de nieuwe Next.js-routes opzet, en je zou SEO-verbeteringen binnen een paar weken moeten zien.

Moet ik PostgreSQL kennen om Supabase te gebruiken?

Basiskennis van SQL helpt veel, maar Supabase biedt een visuele tabeleditor en een JavaScript-clientbibliotheek die de meeste query's abstraheren. Dat gezegd, het begrijpen van SQL zal je dramatisch effectiever maken. Voor complexe query's, rapportage en prestatieafstemming is SQL-kennis essentieel. Als je team geen SQL-ervaring heeft, is dit een goed moment om erin te investeren -- het is een vaardigheid die voor altijd dividenden oplevert.

Wat gebeurt er met mijn Bubble-app's API-integraties tijdens de migratie?

Je moet elke integratie opnieuw in je Next.js-app maken. Het goede nieuws is dat dit meestal veel gemakkelijker is met code dan met Bubble's API Connector-plugin. Een Stripe-integratie die een plugin en 15 workflows in Bubble vereiste, zou misschien 50 regels code zijn met de Stripe Node.js SDK. Maak een volledige lijst van elke externe service waarmee je Bubble-app communiceert en pak ze één voor één aan.

Kan ik Supabase's gratis tier voor productie gebruiken?

Supabase's gratis tier in 2026 geeft je 500MB databaseopslag, 1GB bestandsopslag, en 50.000 maandelijkse actieve gebruikers op auth. Voor zeer vroegstadium-producten kan dit werken. Maar voor elke ernstige productie-app wil je het Pro-plan voor $25/maand voor betere prestaties, dagelijkse back-ups en geen projectonderbreking na inactiviteit. Het is nog steeds absurd goedkoop vergeleken met Bubble.