Je CTO stuurt om 9:47 uur het Slack-bericht door: "Kunnen we headless gaan met TYPO3, of moeten we herbouwen in Next.js?" Je onderhoudt dezelfde TYPO3-monoliet sinds 2018—TypoScript-sjablonen, Fluid-onderdelen, een extensions-map met 40+ aangepaste modules. Nu heeft iemand een blogpost over ontkoppelde architecturen gelezen, en je roadmap is zojuist verdwenen. In twee jaar heb ik zes grote TYPO3-sites naar headless-stacks verplaatst—drie hebben TYPO3 via EXT:headless behouden, drie zijn gemigreerd naar Next.js + Supabase. De beslissing hangt af van drie variabelen die de meeste bureaus negeren, en de eerste heeft niets te maken met prestaties.

Dit is niet academisch voor mij. Ik heb productiesites met beide benaderingen gelanceerd, ben door die lastige randgevallen gegaan, en heb teams zien triomferen of worstelen—soms spectaculair—met elke stack. Laten we bespreken wat ik onderweg heb opgepiekt.

De twee benaderingen begrijpen

Eerst dingen eerst: wat vergelijken we eigenlijk? Dit zijn twee totaal verschillende beesten.

TYPO3 + EXT:headless (Ontkoppeld)

Hierbij blijft TYPO3 je CMS, en handelt alle taken voor contentbeheer af. De twist is dat je de oude Fluid/TypoScript-rendering vervangt door een JSON API. Je gloednieuwe frontend? Dat kan React, Vue zijn, wat je maar wilt, dat de API gebruikt. TYPO3 blijft alles beheren, zoals modellen, machtigingen en workflows.

De EXT:headless-extensie? Dat is de VIP-toegang achter de schermen die in TYPO3's renderingproces gaat en JSON in plaats van HTML uitvoert. Het is geen add-on API—het is het échte werk dat rechtstreeks met TYPO3's content-ingewanden werkt.

Next.js + Supabase (Volledig Headless)

Anderzijds heb je Next.js die je frontend en server-side logica beheert. Supabase (een wild mengsel van PostgreSQL, auth, bestandsopslag en real-time functies) verzorgt je backend. Geen TYPO3 hier, mensen. Je laat het oude CMS volledig achter voor pure flexibiliteit en een modern JavaScript-native setup.

Hoe EXT:headless eigenlijk werkt

Als je ext:headless op TYPO3 zet, registreert het een nieuw paginatype dat alles verandert. Geen content meer via Fluid-sjablonen; in plaats daarvan geeft het JSON uit.

Hier is een voorbeeld van wat je krijgt:

{
  "id": 42,
  "type": "textmedia",
  "content": {
    "header": "Welkom op onze site",
    "headerLayout": 2,
    "bodytext": "<p>Een stukje rijke tekstinhoud hier</p>",
    "media": [
      {
        "publicUrl": "/fileadmin/images/hero.webp",
        "properties": {
          "width": 1920,
          "height": 1080,
          "alt": "Heldenafbeelding"
        }
      }
    ]
  },
  "appearance": {
    "layout": "default",
    "frameClass": "default",
    "spaceAfter": "medium"
  }
}

De frontend verbindt dan deze punten met React/Vue-componenten. Als je al met een op componenten gebaseerde CMS hebt gewerkt, zal dit aanvoelen als je favoriete oude trui.

EXT:headless instellen

Een typische setup begint zo:

composer require friendsoftypo3/headless

En in je TypoScript:

plugin.tx_headless {
  settings {
    debug = 0
  }
}

page = PAGE
page {
  typeNum = 0
  10 = USER
  10.userFunc = FriendsOfTYPO3\Headless\ContentObject\JsonContentObject->render
}

Hier komt het: voor elk aangepast content-element in TYPO3 heb je JSON-serializers nodig. Voor een site met, zeg, een handvol aangepaste elementen? Je kijkt tegen een paar dagen werk aan. Een massieve enterprise-setup met tientallen elementen? Zet je schrap—dit kan weken duren.

Wat TYPO3 Headless goed doet

  • Editorervaring blijft intact. TYPO3's vertrouwde backend betekent geen herscholing voor content-editors.
  • Behoud bestaande content. Je setups verdwijnen niet. Al je content, vertalingen en media? Ze blijven.
  • Ondersteuning voor meerdere talen is geweldig. TYPO3 heeft één van de beste taalhandelingen die ik heb gezien.
  • Enterprise-ready functies. Alles van werkruimten tot geplande publicatie is klaar voor gebruik.

Het probleem met EXT:headless

  • TYPO3 verdwijnt nergens heen. Je hebt PHP-deskundigen nodig die TYPO3 begrijpen, en die zijn niet overal te vinden.
  • Complexe hosting. Je jongleert PHP (TYPO3) en Node.js (je frontend). Dubbel het plezier, dubbel de complexiteit.
  • Beperkte API-interface. Het is JSON, geen GraphQL. Aanpassingen betekenen terugkeren naar TYPO3-extensie-ontwikkeling.
  • Preview-kopzorg. Een echte preview integreren met TYPO3 en Next.js? Niet voor zwakhartige harten.

TYPO3 Headless Mode vs Next.js + Supabase: Een echte vergelijking

Next.js + Supabase: De volledig Headless Stack

De opzet

Bij deze setup verzorgt Next.js je applicatielaag, en Supabase springt in voor alle database- en backendsituaties.

┌─────────────┐     ┌──────────────┐     ┌─────────────┐
│   Next.js   │────▶│   Supabase   │────▶│ PostgreSQL  │
│  (App Router)│     │   (BaaS)     │     │  (Database)  │
└─────────────┘     └──────────────┘     └─────────────┘

Content management zonder TYPO3

Hier wordt het lastig. Hoe beheren editors content?

  1. Aangepast admin-panel. Het is meer werk dan je zou denken.
  2. Supabase Studio. Geweldig voor developers, editors houden er misschien niet van.
  3. Voeg een CMS toe. Nu beheer je drie services.
  4. Gebruik Payload met zijn eigen database. Behoorlijk elegant naar mijn mening.

Just so you see, hier is een basisimplementatie voor het ophalen van content met Supabase:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.SUPABASE_SERVICE_ROLE_KEY!
)

export async function getPage(slug: string) {
  const { data, error } = await supabase
    .from('pages')
    .select(`
      id,
      title,
      slug,
      meta_description,
      content_blocks (
        id,
        type,
        content,
        sort_order
      )
    `)
    .eq('slug', slug)
    .eq('status', 'published')
    .single()

  if (error) throw error
  return data
}

Waar Next.js + Supabase schittert

  • Verbazingwekkende prestaties. Statische generatie, ISR, edge-rendering — je speelplaats voor snelheid.
  • Developers in overvloed. JavaScript/TypeScript-mensen zijn overal.
  • Supabase's Row Level Security. Serieus cool voor wanneer je strakke controle wilt.
  • Real-time functies. Integreer live updates moeiteloos.
  • Gemakkelijke implementatie. Gebruik Vercel voor Next.js en Supabase Cloud voor backend of self-host als je wilt.

De worstelpunten hier

  • DIY CMS. Tenzij je een ander headless CMS in de mix gooit, rol je eigenlijk je eigen.
  • Redactioneel gat. Geen ingebouwde workflows. Conceptstaten, geplande publicatie? Je moet ze zelf maken.
  • Taalbeheer. Ondersteuning voor content in meerdere talen? Je zult thuis ingebouwde ondersteuning sweten.
  • Problemen met mediabeheer. Supabase-opslag is niet afgestemd op digitale activa. Onthoud dat.

Rechtstreeks vergelijken

Zie hoe ze zich verhouden:

| Functie | TYPO3 + EXT:headless | Next.js + Supabase | |---------|---------------------|--------------------|| | Editing UX | Uitstekend | Aangepast of toegevoegde CMS | | Meerdere talen | Ingebouwd | DIY-implementatie | | Workflows | Ingebouwd | Aangepaste bouw nodig | | Prestaties | Goed | Uitstekend | | API | Beperkt | Volledige controle | | Real-time | Afwezig | Ondersteund | | Auth | Legacy | Modern en flexibel | | Complexiteit | Hoog | Gemiddeld | | Talent pool | Schaars | Volop | | Content migratie | Onnodig | Volledige migratie | | Functies | Ingebakken | Bouwen of kopen | | Instellingstijd | 2-4 weken | 4-8 weken | | Kosten (hosting) | €150-500 | €45-200 |

Prestatiesbenchmarks

Laten we enkele nummers zien van een site die ik heb getest—bedrijfssite, 200 pagina's, meertalige ondersteuning:

| Metriek | TYPO3 Headless + Next.js | Next.js + Supabase (SSG) | |--------|--------------------------|-------------------------|| | TTFB (uncached) | 280ms | 45ms | | TTFB (CDN cached) | 35ms | 32ms | | LCP | 1.8s | 1.2s | | CLS | 0.02 | 0.01 | | Lighthouse Score | 92 | 98 | | Build time (full) | 4m 20s | 1m 45s | | API response (p95) | 180ms | 22ms |

Bottom line? Hoewel uncached TTFB beter is met Supabase, CDN-caching niveleert het veld vrijwel. Beide, wanneer correct ingesteld, lopen snel genoeg voor de eindgebruiker.

TYPO3 Headless Mode vs Next.js + Supabase: Een echte vergelijking - architectuur

Ontwikkelaarservaring en teamoverwegingen

TYPO3 duiken

Je hebt nog steeds TYPO3-professionals nodig voor headless-projecten. Denk aan PHP-serializers, testupgrades en compatibiliteitsproblemen aanpakken. In 2026 kunnen deze deskundigen je €80-120/uur kosten. En sommige developers zijn niet enthousiast over headless-setups—het haalt de vreugde uit Fluid-templating.

De Next.js + Supabase Club

JavaScript-developers zijn overvloedig, maar onthoudt dat het ontwerpen van content management systems niet makkelijk voor iedereen is. Supabase's ontwikkelaarvaring is behoorlijk glad: auto-gegenereerde TypeScript-types, real-time subscriptions en solide auth-helpers. Maar alle gegevensmodellering en architectuurbesluiten? Die zijn helemaal van jou.

Denk je erover om deze route te nemen? Ons team heeft expertise ontwikkeld in Next.js development om je nare verrassingen te helpen voorkomen.

Migratiestrategieën

Van traditioneel TYPO3 naar TYPO3 Headless

Lager risico, content blijft intact. Vooral een frontend-herschrijving.

  1. Roll out EXT:headless
  2. Wijs content-elementen toe aan JSON
  3. Craft the Next.js/Nuxt frontend
  4. Sorteer preview-integratie
  5. Go live!

Timeframe: 8-16 weken voor een fatsoenlijk grote bedrijfssite.

Van TYPO3 naar Next.js + Supabase

Houd je vast, dit is een volledige herbouw.

  1. Controleer huidige content-setups
  2. Schets je PostgreSQL-schema
  3. Schrijf migratiescripts
  4. Verplaats media- en bestandsverwijzingen
  5. Bouw redactietools of integreer een ander CMS
  6. Bouw opnieuw voor de frontend
  7. Handel URL-omleidingen af
  8. Verplaats meertalige content

Timeframe: 16-32 weken. Complexe headless-ontwikkeling? Breng professionals in om het leven makkelijker te maken.

Kostenanalyse

Laten we het optellen voor een middelgrote bedrijfssetup: 200 pagina's, 3 talen, 5 editors, 50K maandelijkse bezoekers.

TYPO3 Headless — Kosten jaar 1

Item Kosten
TYPO3 Hosting (Beheerd) €3.600/jaar
Next.js Hosting (Vercel Pro) €240/jaar
Frontend Development €25.000-45.000
EXT:headless Integration €8.000-15.000
Totaal jaar 1 €36.840-63.840
Doorlopend jaarlijks €5.000-8.000

Next.js + Supabase — Kosten jaar 1

Item Kosten
Supabase Pro €300/jaar
Vercel Pro €240/jaar
CMS toevoegen (indien nodig) €0-3.600/jaar
Content Migration €10.000-20.000
Frontend + Backend Development €40.000-70.000
Editorial Tooling €10.000-25.000
Totaal jaar 1 €60.540-119.140
Doorlopend jaarlijks €2.000-6.000

Volledig headless gaan kost veel vooraf, maar verlaagt maandelijkse uitgaven omdat je TYPO3-hosting loslaat. Onderestimeer alleen niet de extra CMS-bouw erbovenop.

Wanneer welke kiezen

TYPO3 + EXT:headless

  • Vasthouden aan legacy-content en gevestigde workflows.
  • Behoud vertrouwde redactionele instellingen en rijke functies.
  • Profiteer van geavanceerde native meertalige ondersteuning.
  • Behoud TYPO3-developers.

Next.js + Supabase

  • Bij het starten van nul.
  • De applicatie heeft veel interactieve functies nodig.
  • Je dev-team is al JavaScript-gericht.
  • Top-tier prestaties is een sleutelfocus.
  • Comfortabel met het toevoegen van een headless CMS.

Overweeg een derde hoek

Misschien is het mengen ook in je gedachten opgekomen? Next.js, een headless CMS, plus Supabase voor app-data kunnen het beste combineren. Het biedt goed afgeronde redactietools zonder TYPO3-ballast. Als je ook naar opties kijkt als Astro development voor lichtgewicht content-zware sites, dat is zeker de moeite waard.

Wil je over je specifieke behoeften praten? We zijn hier om te helpen beoordelen wat logisch is voor jouw unieke scenario—neem contact op, en we beloven een eerlijke evaluatie, zelfs als het "blijf bij wat je kent" is.

Veelgestelde vragen

Is TYPO3 EXT:headless productieklaar in 2026? Yep, absoluut. EXT:headless is stabiel sinds versie 3.x en wordt actief ondersteund. Versie 4.x dekt TYPO3 v12 en v13 met solide content-serialisatie, menu-generatie en formulierverwerking. Een heleboel grote enterprise-sites draaien het in productie-setups, inclusief sectoren als overheid en bankwezen in Duitsland en Oostenrijk.

Kan ik Next.js gebruiken voor een TYPO3 headless frontend? Zeker, het is een klassieke combinatie. Je zult Next.js App Router met server-componenten gebruiken om info van TYPO3's JSON API op te halen. Preview-integratie is het lastigste deel: set draft mode in en zorg ervoor dat TYPO3 het aanroept via preview-URL's. Gelukkig is de community's nuttige documentatie je gids door de Next.js pairing.

Hoe verhoudt Supabase zich tot TYPO3's database-setup? Oh, dit zijn appels en sinaasappels. TYPO3 draait op Doctrine DBAL met een strenger schema beheerd door TCA. Supabase geeft die zoete PostgreSQL-vrijheid met Row Level Security. Supabase biedt flexibele en krachtige queryability, maar TYPO3 is zorgvuldig gestructureerd om fouten te voorkomen die editors per ongeluk zouden kunnen introduceren. Het gaat allemaal om controle versus veiligheid.

SEO-bezwaren bij headless TYPO3? Meta-tags en gestructureerde gegevens afhandelen? EXT:headless serialiseert paginaeigenschappen zoals meta-tags en Open Graph-gegevens. Je frontend moet ze als HTML-tags renderen. Gebruik Next.js's Metadata API in layouts. Zolang je TYPO3-setup solide is, zouden SEO-gegevens moeten volgen. Integreer extensies zoals EXT:yoast_seo en het zal goed samenwerken met headless-configuraties.

Is Supabase geschikt voor content delivery op ondernemingsniveau? Zeker. Supabase Cloud, draaiend op AWS, biedt 99,9% uptime op Pro-plans en verhoogt naar 99,95% op Team-plans (controleer 2026-tarieven). Voor CDN-caching (Vercel's Edge Network, Cloudflare) zorgt Supabase vooral voor betrouwbaarheid van schrijf- en real-time functies. Voor kritisch enterprise-gebruik, self-host Supabase voor maximale controle.

Hoe pakken we beeldverwerking aan zonder TYPO3? TYPO3 verwerkt inheems afbeeldingen—crop, resize, formaat flip. Zonder het, zet je workflow in voor beeldverwerking. De top-kanshebbers van 2026 zijn: Next.js Image Optimization (ingebouwd, Vercel-ondersteunend), Cloudinary (gratis starten, serieus gebruik vereist betaalde plannen), of imgix (beginnend bij €100+/maand). Supabase Storage handelt originelen af maar niet transformaties.

Kunnen we stapsgewijs migreren van TYPO3 Headless naar volledig headless? Absoluut, denk eraan als een soepel plan. Begin met headless TYPO3, isoleer je frontend. Verplaats content geleidelijk van TYPO3 naar Supabase of je gekozen CMS—start met eenvoudigere types. Tijdens de fase werkt je Next.js frontend met data uit beide bronnen.

Wat is de leercurve voor een TYPO3-team dat naar Next.js + Supabase gaat? Een realistische opbouw is ongeveer drie tot zes maanden. Dat gezegd hebbende, de uitdaging is niet JavaScript of TypeScript—het is de paradigmashift. TYPO3-developers zijn gewend dat het framework content-structuren, caching en routes stuurt. In het Next.js + Supabase-model zijn die oproepen van jou. Het is bevrijdend maar overweldigend in het begin. Pairing met ervaren Next.js-mensen maakt deze sprong veel soepeler.