TYPO3 Headless Mode versus Next.js + Supabase: Een echte vergelijking
TYPO3 Headless vs. Next.js + Supabase: Een Echte Vergelijking
Ik heb de afgelopen twee jaar bedrijfs-TYPO3-installaties gemigreerd naar headless-architecturen. En weet je welke vraag steeds opkomt? Moeten we TYPO3 behouden en headless gaan met EXT:headless of schakelen we over naar Next.js met iets als Supabase? Het is behoorlijk lastig, toch? Zoals de meeste architectuurbeslissingen komt het antwoord neer op "het hangt ervan af." Maar laten we precies uitwerken waar het van afhangt.
Dit is niet alleen academisch voor mij. Ik heb productiesites met beide aanpakken gelanceerd, ben door die lastige edge cases heen gegaan, en heb zien dat teams met elk van beide stacken zowel triomferen als worstelen—soms spectaculair. Laten we bespreken wat ik onderweg heb opgestoken.
De Twee Aanpakken Begrijpen
Eerst maar eens: wat vergelijken we hier eigenlijk? Dit zijn twee volstrekt verschillende beesten.
TYPO3 + EXT:headless (Ontkoppeld)
Hierbij blijft TYPO3 je CMS en verzorgt het alle content management backend-taken. Het slimme gedeelte is dat je de oude Fluid/TypoScript-rendering vervangt door een JSON API. Je gloedrood frontend? Dat kan React, Vue, wat je maar wilt zijn, en slurpt gewoon die API op. TYPO3 gaat door met het beheren van al het goede, zoals modellen, permissies en werkstromen.
De EXT:headless-extensie? Dat is het VIP-backstagepassje dat zich in TYPO3's renderingproces mengt en JSON in plaats van HTML uitgeeft. Het is geen bijkomende API—het is het echte werk, direct werkend met TYPO3's contentinternals.
Next.js + Supabase (Volledig Headless)
Aan de andere kant heb je Next.js dat je frontend en server-side logica beheert. Supabase (een wilde combinatie van PostgreSQL, auth, bestandsopslag en real-time features) zorgt voor je backend. Geen TYPO3 hier in het geheel. Je gooit de oude CMS overboord voor pure flexibiliteit en een modern JS-native setup.
Hoe EXT:headless Werkelijk Werkt
Als je ext:headless op TYPO3 plakt, registreert het een nieuw paginatype dat alles verandert. Geen content meer door Fluid-sjablonen; in plaats daarvan levert het JSON.
Hier een voorproefje van wat je krijgt:
{
"id": 42,
"type": "textmedia",
"content": {
"header": "Welkom op onze site",
"headerLayout": 2,
"bodytext": "<p>Wat rich text-inhoud hier</p>",
"media": [
{
"publicUrl": "/fileadmin/images/hero.webp",
"properties": {
"width": 1920,
"height": 1080,
"alt": "Heroafbeelding"
}
}
]
},
"appearance": {
"layout": "default",
"frameClass": "default",
"spaceAfter": "medium"
}
}
De frontend knikt deze dots naar React/Vue-componenten. Als je met component-gebaseerde CMS hebt geëxperimenteerd, voelt dit 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 het cruciale punt: Voor elk custom content element in TYPO3 heb je JSON-serializers nodig. Voor een site met, zeg, een handvol custom elementen? Je kijkt naar een paar dagen werk. Een massieve enterprise-setup met tientallen elementen? Zet je schrap—dit kan weken duren.
Wat TYPO3 Headless Goed Doet
- De editor-ervaring blijft intact. TYPO3's vertrouwde backend betekent geen hertraining voor content editors.
- Behoud bestaande content. Je setups verdwijnen niet. Al je content, vertalingen en media? Die blijven.
- Meertalige ondersteuning is top. TYPO3 heeft een van de beste taalbehandelingen die ik ken.
- Enterprise-ready features. Alles van workspaces tot geplande publicatie staat klaar.
Het Voorbehoud met EXT:headless
- TYPO3 gaat nergens heen. Je hebt PHP-savvyvolkeren nodig die TYPO3 snappen, en die zijn niet overal.
- Ingewikkelde hosting. Je jongleert PHP (TYPO3) en Node.js (je frontend). Dubbel plezier, dubbel ingewikkeld.
- Beperkte API-interface. Het is JSON, niet GraphQL. Aanpassingen betekenen graven in TYPO3-extension-development.
- Preview-kopzorg. Een real-time preview integreren met TYPO3 en Next.js? Niet voor de zwakken van hart.
Next.js + Supabase: De Volledig Headless Stack
De Indeling
Met deze setup zorgt Next.js voor je applicatielaag, en springt Supabase in voor alle database- en backend-taken.
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Next.js │────▶│ Supabase │────▶│ PostgreSQL │
│ (App Router)│ │ (BaaS) │ │ (Database) │
└─────────────┘ └──────────────┘ └─────────────┘
Content Management Zonder TYPO3
Hier wordt het lastig. Hoe beheren editors content?
- Custom admin panel. Het is meer werk dan je zou denken.
- Supabase Studio. Geweldig voor devs, editors houden er misschien niet van.
- Voeg een CMS toe. Nu beheer je drie diensten.
- Gebruik Payload met zijn eigen database. Vrij elegant naar mijn mening.
Opdat je een nut ziet, hier een basisimplementatie voor content ophalen 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
- Hemelhoge prestaties. Statische generatie, ISR, edge rendering — je speeltuin voor snelheid.
- Programmeurs overal. JavaScript/TypeScript-experts zijn overal te vinden.
- Supabase's Row Level Security. Serieus cool voor wanneer je strakke controle wilt.
- Real-time features. Integreer live-updates zonder moeite.
- Gemakkelijke deployment. Gebruik Vercel voor Next.js en Supabase Cloud voor backend of host zelf.
De Moeilijkheden Hier
- DIY CMS. Tenzij je een ander headless CMS erin gooit, bouw je min of meer zelf.
- Redactioneel gat. Geen ingebouwde workflows. Conceptstaten, geplande publicatie? Je moet ze zelf bouwen.
- Taalbeheer. Ondersteuning voor meertalig content? Je zult jezelf moeten uitsloven.
- Media management-ellende. Supabase storage is niet gesneden voor digitale assets. Houd dat in gedachten.
Rechtstreekse Vergelijking
Kijk hoe ze tegen elkaar opwegen:
| Feature | TYPO3 + EXT:headless | Next.js + Supabase |
|---|---|---|
| Redactie UX | Uitstekend | Custom of toegevoegd CMS |
| Meertaling | Ingebouwd | DIY-implementatie |
| Workflows | Ingebouwd | Custom build nodig |
| Prestatie | Goed | Uitstekend |
| API | Beperkt | Volledige controle |
| Real-time | Afwezig | Ondersteund |
| Auth | Legacy | Modern en flexibel |
| Complexiteit | Hoog | Gemiddeld |
| Talentpool | Schaars | Overvloedig |
| Content migratie | Onnodig | Volledige migratie |
| Features | Ingebakken | Bouwen of kopen |
| Installatietijd | 2-4 weken | 4-8 weken |
| Kosten (hosting) | €150-500 | €45-200 |
Prestatiebanchtesten
Laten we enkele getallen zien van een site die ik heb getest—bedrijfssite, 200 pagina's, meertalige ondersteuning:
| Metriek | TYPO3 Headless + Next.js | Next.js + Supabase (SSG) |
|---|---|---|
| TTFB (niet in cache) | 280ms | 45ms |
| TTFB (CDN in cache) | 35ms | 32ms |
| LCP | 1.8s | 1.2s |
| CLS | 0.02 | 0.01 |
| Lighthouse Score | 92 | 98 |
| Build-tijd (volledig) | 4m 20s | 1m 45s |
| API response (p95) | 180ms | 22ms |
Eindstand? Hoewel niet-gecachede TTFB beter is met Supabase, maakt CDN-caching het speelveld min of meer gelijk. Beide, goed ingesteld, vliegen snel genoeg voor de eindgebruiker.
Developer Experience en Team Overwegingen
Duiken in TYPO3
Je hebt nog steeds TYPO3-professionals nodig voor headless-projecten. Denk aan PHP-serializers, upgrades testen en compatibility-issues afhandelen. In 2025 kunnen deze experts je €80-120/uur kosten. En sommige devs zijn niet blij met headless-setups—het haalt de lol uit Fluid-templating.
De Next.js + Supabase Club
JavaScript-devs zijn overvloedig, maar onthoud dat het ontwerpen van content managementsystemen niet voor iedereen gemakkelijk is. Supabase's developer experience is behoorlijk sappig: auto-gegenereerde TypeScript-types, real-time subscriptions en solide auth-helpers. Maar alle data modeling en architectuurbeslissingen? Die zijn allemaal aan jou.
Denk je over deze route na? Ons team heeft expertise aangescherpt in Next.js development om je naar nare verrassingen.
Migratiestrategieën
Van Traditioneel TYPO3 naar TYPO3 Headless
Lager risico, content blijft intact. Vooral een front-end herschrijving.
- Zet EXT:headless uit
- Map content elementen naar JSON
- Bouw de Next.js/Nuxt frontend
- Zet preview-integratie in orde
- Go live!
Tijdskader: 8-16 weken voor een redelijk grote bedrijfssite.
Van TYPO3 naar Next.js + Supabase
Zet je schrap, dit is een volledige rebuild.
- Controleer huidige content-setups
- Schets je PostgreSQL-schema
- Schrijf migratiescripts
- Verplaats media en bestandsverwijzingen
- Bouw redactionele tools of integreer een ander CMS
- Bouw opnieuw voor de frontend
- Ga om met URL-redirects
- Verspreid meertaling-content
Tijdskader: 16-32 weken. Ingewikkelde headless development? Haal professionals in om het leven gemakkelijker te maken.
Kostenanalyse
Laten we tellen voor een middelgrote bedrijfsopstelling: 200 pagina's, 3 talen, 5 editors, 50K maandelijkse bezoekers.
TYPO3 Headless — Jaar 1 Kosten
| Item | Kosten |
|---|---|
| TYPO3 Hosting (Managed) | €3.600/jaar |
| Next.js Hosting (Vercel Pro) | €240/jaar |
| Frontend Development | €25.000-45.000 |
| EXT:headless Integratie | €8.000-15.000 |
| Totaal Jaar 1 | €36.840-63.840 |
| Doorlopend Jaarlijks | €5.000-8.000 |
Next.js + Supabase — Jaar 1 Kosten
| Item | Kosten |
|---|---|
| Supabase Pro | €300/jaar |
| Vercel Pro | €240/jaar |
| Voeg CMS toe (indien nodig) | €0-3.600/jaar |
| Content Migratie | €10.000-20.000 |
| Frontend + Backend Development | €40.000-70.000 |
| Redactionele Tooling | €10.000-25.000 |
| Totaal Jaar 1 | €60.540-119.140 |
| Doorlopend Jaarlijks | €2.000-6.000 |
Volledig headless gaat groot van voren, maar snijdt maandelijkse uitgaven terug omdat je TYPO3-hosting opzegt. Onderschat alleen de extra CMS-bouw niet.
Wanneer Welke Kiezen
TYPO3 + EXT:headless
- Blijf bij legacy content en vastgestelde workflows.
- Behoud vertrouwde redactionele instellingen en rijke features.
- Profiteer van geavanceerde native meertalige ondersteuning.
- Behoud TYPO3-developers.
Next.js + Supabase
- Bij projecten vanaf nul.
- De applicatie heeft veel interactieve features nodig.
- Je dev-team is al JavaScript-gericht.
- Topklasse prestaties is een sleutelkwestie.
- Comfortabel met het toevoegen van een headless CMS.
Overweeg een Derde Hoek
Misschien stak het mengen je gedachte door het hoofd? Next.js, een headless CMS, plus Supabase voor app-gegevens kan het beste combineren. Het biedt goed uitgeruste redactionele tools zonder TYPO3-bagage. Als je ook oog hebt voor opties zoals Astro development voor lichte content-zware sites, dat is het overwegen waard.
Zin om over je specifieke behoeften te praten? We zijn er voor je beschikking om in te schatten wat verstandig is voor jouw unieke situatie—neem contact op, en we beloven een eerlijke evaluatie, zelfs als het "blijf waar je bent" is.
Veelgestelde Vragen
Is TYPO3 EXT:headless production-ready in 2025? Ja, absoluut. EXT:headless is steady sinds versie 3.x en actief ondersteund. Versie 4.x dekt TYPO3 v12 en v13 met solide content serialisatie, menu-generatie en form handling. Een hoop enorme enterprise-sites runnen het in productieopstellingen, met inbegrip van sectoren als overheid en banken in Duitsland en Oostenrijk.
Kan ik Next.js gebruiken voor een TYPO3 headless frontend? Zeker, het is een klassieker. Je zult Next.js App Router met server components gebruiken om info uit TYPO3's JSON API op te halen. Preview-integratie is het lastigste bit: draft mode instellen en TYPO3 er via preview-URL's naar wijzen. Gelukkig helpt documentatie van de community je door de Next.js-koppeling.
Hoe staat Supabase tegenover TYPO3's database-setup? Och, dit zijn appels en sinaasappels. TYPO3 draait op Doctrine DBAL met een strikter schema beheerd door TCA. Supabase geeft die zoete PostgreSQL-vrijheid met Row Level Security. Supabase biedt flexibele en krachtige queryvermogens, maar TYPO3 is zorgvuldig gestructureerd om fouten te voorkomen die editors accidenteel invoeren. Het gaat allemaal om controle versus veiligheid.
SEO-bezwaren bij headless TYPO3? Meta tags en structured data afhandelen?
EXT:headless serialiseert pagina-eigenschappen 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 goed is, volgt SEO-data vanzelf. Integreer extensies als EXT:yoast_seo en het speelt aardig met headless-setups.
Is Supabase geschikt voor enterprise-level content delivery? Zeker. Supabase Cloud, draaiend op AWS, biedt 99,9% uptime op Pro-plannen en verhoogt naar 99,95% op Team-plannen (check 2025-tarieven). Voor CDN-caching (Vercel's Edge Network, Cloudflare), zorgt Supabase primair voor write- en real-time feature-betrouwbaarheid. Voor kritiek enterprise-gebruik, self-host Supabase voor max controle.
Hoe pakken we image processing zonder TYPO3 aan? TYPO3 verwerkt native afbeeldingen—crop, resize, format flip. Zonder het, zet je image-workflow op. 2025's topkandidaten zijn: Next.js Image Optimization (ingebouwd, Vercel-ondersteund), Cloudinary (gratis kickstart, ernstig gebruik vereist betaalde plannen), of imgix (vanaf €100+/maand). Supabase Storage beheert originals maar geen transformaties.
Kunnen we incrementeel migreren van TYPO3 Headless naar volledig headless? Absoluut, denk eraan als een soepel plan. Begin met headless TYPO3, isoleer je frontend. Verplaats langzaam content van TYPO3 naar Supabase of je gekozen CMS—begin met eenvoudigere soorten. Tijdens de fase werkt je Next.js frontend met data uit beide bronnen.
Wat is de leercurve voor een TYPO3-team dat overgaat naar Next.js + Supabase? Een realistische opwarmingsperiode is ongeveer drie tot zes maanden. Dat gezegd, de uitdaging is niet JavaScript of TypeScript—het is de paradigmaverschuiving. TYPO3-developers zijn gewend dat het framework content-structuren, caching en routes stuurt. In het Next.js + Supabase-model zijn die oproepen aan jou. Het is bevrijdend maar overweldigend in eerste instantie. Pair programming met ervaren Next.js-expert maakt deze sprong veel soepeler.