TYPO3 Headless vs Next.js + Supabase: Echte Migrationsdaten
Ihr CTO leitet die Slack-Nachricht um 9:47 Uhr weiter: "Können wir TYPO3 headless gehen, oder müssen wir in Next.js neu aufbauen?" Sie pflegen dasselbe TYPO3-Monolith seit 2018—TypoScript-Templates, Fluid-Partials, ein Extensions-Ordner mit über 40 benutzerdefinierten Modulen. Jetzt hat jemand einen Blogpost über entkoppelte Architekturen gelesen, und Ihre Roadmap ist gerade verdampft. In zwei Jahren habe ich sechs Enterprise-TYPO3-Seiten zu Headless-Stacks migriert—drei behielten TYPO3 über EXT:headless, drei migrierten zu Next.js + Supabase. Die Entscheidung hängt von drei Variablen ab, die die meisten Agenturen ignorieren, und die erste hat nichts mit Performance zu tun.
Das ist für mich nicht akademisch. Ich habe Production-Sites mit beiden Ansätzen gestartet, bin durch diese kniffligen Edge Cases geschwitzt und habe Teams entweder triumphieren oder spektakulär scheitern sehen—manchmal sehr spektakulär—mit jedem Stack. Lassen Sie uns über das sprechen, was ich dabei gelernt habe.
Die zwei Ansätze verstehen
Zunächst: Was vergleichen wir hier überhaupt? Das sind völlig unterschiedliche Biester.
TYPO3 + EXT:headless (Entkoppelt)
Hier bleibt TYPO3 Ihr CMS und verwaltet alle Backend-Content-Management-Aufgaben. Der Twist: Sie tauschen das alte Fluid/TypoScript-Rendering gegen eine JSON-API aus. Ihr glänzendes neues Frontend? Es könnte React, Vue oder was Sie wollen sein und diese API nutzen. TYPO3 kümmert sich um die guten Dinge wie Models, Berechtigungen und Workflows.
Die EXT:headless-Extension? Das ist der VIP-Backstage-Pass, der in TYPOs Render-Prozess eindringt und JSON statt HTML ausgibt. Es ist kein Add-on-API—es ist die echte Lösung, die direkt mit TYPOs Content-Kern arbeitet.
Next.js + Supabase (Vollständig Headless)
Auf der anderen Seite verwaltet Next.js Ihr Frontend und die serverseitige Logik. Supabase (eine wilde Kombination aus PostgreSQL, Auth, File Storage und Real-Time-Goodies) kümmert sich um Ihr Backend. Kein TYPO3 hier, Leute. Sie werfen das alte CMS raus und bekommen reine Flexibilität und ein modernes JS-natives Setup.
Wie EXT:headless wirklich funktioniert
Wenn Sie ext:headless auf TYPO3 aufsetzen, registriert es einen neuen Seitentyp, der alles verändert. Kein Content mehr durch Fluid-Templates; stattdessen serviert es JSON.
Hier ein Vorgeschmack auf das, was Sie bekommen:
{
"id": 42,
"type": "textmedia",
"content": {
"header": "Willkommen auf unserer Website",
"headerLayout": 2,
"bodytext": "<p>Etwas Rich-Text-Content hier</p>",
"media": [
{
"publicUrl": "/fileadmin/images/hero.webp",
"properties": {
"width": 1920,
"height": 1080,
"alt": "Hero-Bild"
}
}
]
},
"appearance": {
"layout": "default",
"frameClass": "default",
"spaceAfter": "medium"
}
}
Das Frontend verbindet dann diese Punkte mit React/Vue-Komponenten. Falls Sie mit einem komponentengestützten CMS herumgespielt haben, wird sich das wie Ihr Lieblings-Cardigan anfühlen.
EXT:headless einrichten
Ein typisches Setup beginnt so:
composer require friendsoftypo3/headless
Und in Ihrem TypoScript:
plugin.tx_headless {
settings {
debug = 0
}
}
page = PAGE
page {
typeNum = 0
10 = USER
10.userFunc = FriendsOfTYPO3\Headless\ContentObject\JsonContentObject->render
}
Hier kommt der Knackpunkt: Für jedes benutzerdefinierte Content-Element in TYPO3 benötigen Sie JSON-Serializer. Für eine Site mit beispielsweise einer Handvoll benutzerdefinierter Elemente? Sie sind bei ein paar Tagen Arbeit. Ein massives Enterprise-Setup mit vielen Elementen? Machen Sie sich bereit—das könnte Wochen dauern.
Was TYPO3 Headless gut macht
- Editor-Erfahrung bleibt intakt. TYPOs vertrauter Backend bedeutet keine Umschulung für Content-Editoren.
- Bewahren Sie bestehenden Content. Ihre Setups verschwinden nicht. Alle Ihre Inhalte, Übersetzungen und Medien? Sie bleiben erhalten.
- Multi-Language-Support ist fantastisch. TYPO3 hat eine der besten Sprachverwaltungen, die ich je gesehen habe.
- Enterprise-ready Features. Alles von Workspaces bis zu geplanten Veröffentlichungen ist einsatzbereit.
Der Haken bei EXT:headless
- TYPO3 geht nirgendwohin. Sie benötigen PHP-versierte Leute, die TYPO3 verstehen, und die gibt es nicht überall.
- Komplexes Hosting. Sie jonglieren PHP (TYPO3) und Node.js (Ihr Frontend). Doppelter Spaß, doppelte Komplexität.
- Limitierte API-Schnittstelle. Es ist JSON, nicht GraphQL. Customization bedeutet, zurück ins TYPO3 Extension Development zu tauchen.
- Preview-Kopfzerbrechen. Eine echte Preview zwischen TYPO3 und Next.js integrieren? Nicht für schwache Nerven.
Next.js + Supabase: Der vollständig Headless Stack
Das Layout
Bei diesem Setup kümmert sich Next.js um Ihre Anwendungsschicht, und Supabase kümmert sich um alle Datenbank- und Backend-Aufgaben.
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Next.js │────▶│ Supabase │────▶│ PostgreSQL │
│ (App Router)│ │ (BaaS) │ │ (Database) │
└─────────────┘ └──────────────┘ └─────────────┘
Content Management ohne TYPO3
Hier wird es knifflig. Wie verwalten Editoren Content?
- Benutzerdefiniertes Admin-Panel. Es ist mehr Arbeit als Sie denken.
- Supabase Studio. Großartig für Devs, Editoren könnten es hassen.
- Fügen Sie ein CMS hinzu. Jetzt verwalten Sie drei Services.
- Verwenden Sie Payload mit seiner eigenen Datenbank. Ziemlich elegant meiner Meinung nach.
Falls Sie es sehen möchten, hier ist eine grundlegende Content-Fetch-Implementierung mit 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
}
Was Next.js + Supabase glänzend macht
- Himmelhohe Performance. Static Generation, ISR, Edge Rendering—Ihr Spielplatz für Geschwindigkeit.
- Developers überall. JavaScript/TypeScript-Leute sind überall.
- Supabase's Row Level Security. Ernsthaft cool, wenn Sie straffe Kontrolle wünschen.
- Real-Time-Features. Integrieren Sie Live-Updates wie ein Kinderspiel.
- Einfache Bereitstellung. Verwenden Sie Vercel für Next.js und Supabase Cloud für Backend oder hosten Sie selbst, wenn gewünscht.
Die Kämpfe hier
- DIY CMS. Wenn Sie nicht noch ein Headless-CMS hineinwerfen, bauen Sie im Grunde Ihr eigenes.
- Editorial-Blackhole. Keine eingebauten Workflows. Entwurfszustände, geplante Veröffentlichung? Sie müssen sie selbst implementieren.
- Sprachverwaltung. Multi-Language-Content-Support? Sie werden beim Hausaufbau schwitzen.
- Media-Management-Probleme. Supabase Storage ist nicht für digitale Assets zugeschnitten. Behalten Sie das im Hinterkopf.
Head-to-Head-Vergleich
Schauen Sie sich an, wie sie sich vergleichen:
| Feature | TYPO3 + EXT:headless | Next.js + Supabase | |---------|---------------------|--------------------|| | Editing UX | Ausgezeichnet | Custom oder hinzugefügtes CMS | | Multi-Language | Nativ | DIY-Implementierung | | Workflows | Eingebaut | Custom Build erforderlich | | Performance | Gut | Ausgezeichnet | | API | Limitiert | Volle Kontrolle | | Real-Time | Absent | Unterstützt | | Auth | Legacy | Modern und flexibel | | Komplexität | Hoch | Mittel | | Talent Pool | Selten | Reichlich | | Content-Migration | Nicht erforderlich | Vollständige Migration | | Features | Gebacken | Bauen oder kaufen | | Setup-Zeit | 2-4 Wochen | 4-8 Wochen | | Kosten (Hosting) | €150-500 | €45-200 |
Performance-Benchmarks
Lassen Sie uns einige Zahlen von einer getesteten Site sehen—Corporate-Site, 200 Seiten, mehrsprachige Unterstützung:
| Metrik | 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-Zeit (vollständig) | 4m 20s | 1m 45s | | API-Antwort (p95) | 180ms | 22ms |
Bottom Line? Während uncached TTFB mit Supabase besser ist, gleicht CDN-Caching das Feld ziemlich aus. Beide, wenn richtig eingestellt, sausen schnell genug für den Endbenutzer.
Developer Experience und Team-Überlegungen
In TYPO3 eintauchen
Sie benötigen immer noch TYPO3-Profis für Headless-Projekte. Denken Sie an PHP-Serializer, Testing-Upgrades und Umgang mit Kompatibilitätsproblemen. 2026 könnten diese Experten Sie €80-120/Stunde zurückwerfen. Und einige Devs sind nicht begeistert von Headless-Setups—es nimmt die Freude aus Fluid-Templating.
Der Next.js + Supabase-Club
JavaScript-Devs sind reichlich vorhanden, aber bedenken Sie: Content-Management-Systeme zu designen ist nicht einfach für jeden. Supabase's Developer Experience ist ziemlich glatt: Auto-generierte TypeScript-Typen, Real-Time-Subscriptions und solide Auth-Helfer. Aber alle Datenmodellierung und architektonischen Entscheidungen? Das liegt ganz bei Ihnen.
Denken Sie über diese Route nach? Unser Team hat Expertise in Next.js-Entwicklung verfeinert, um Sie bei fiesen Überraschungen zu helfen.
Migrationsstrategien
Von traditionellem TYPO3 zu TYPO3 Headless
Risiko-niedriger, Content bleibt intakt. Primär ein Frontend-Rewrite.
- EXT:headless ausrollen
- Content-Elemente zu JSON zuordnen
- Das Next.js/Nuxt-Frontend erstellen
- Preview-Integration sortieren
- Live gehen!
Zeitrahmen: 8-16 Wochen für eine anständig große Corporate-Site.
Von TYPO3 zu Next.js + Supabase
Haltet euch fest, das ist ein kompletter Rebuild.
- Aktuelle Content-Setups auditen
- Ihr PostgreSQL-Schema skizzieren
- Migrationsscripte schreiben
- Medien und Dateireferenzen verschieben
- Editorial-Tools bauen oder ein anderes CMS integrieren
- Nochmal für das Frontend bauen
- URL-Redirects ansprechen
- Multi-Language-Content verbreiten
Zeitrahmen: 16-32 Wochen. Komplexe Headless-Entwicklung? Bringen Sie Profis herein, um das Leben leichter zu machen.
Kostenanalyse
Lassen Sie uns die Summe für ein mittelgroßes Corporate-Setup aufrechnen: 200 Seiten, 3 Sprachen, 5 Editoren, 50K monatliche Besucher.
TYPO3 Headless — Jahr 1 Kosten
| Artikel | Kosten |
|---|---|
| TYPO3 Hosting (Managed) | €3.600/Jahr |
| Next.js Hosting (Vercel Pro) | €240/Jahr |
| Frontend Development | €25.000-45.000 |
| EXT:headless Integration | €8.000-15.000 |
| Gesamt Jahr 1 | €36.840-63.840 |
| Laufend jährlich | €5.000-8.000 |
Next.js + Supabase — Jahr 1 Kosten
| Artikel | Kosten |
|---|---|
| Supabase Pro | €300/Jahr |
| Vercel Pro | €240/Jahr |
| Add CMS (if needed) | €0-3.600/Jahr |
| Content-Migration | €10.000-20.000 |
| Frontend + Backend Development | €40.000-70.000 |
| Editorial Tooling | €10.000-25.000 |
| Gesamt Jahr 1 | €60.540-119.140 |
| Laufend jährlich | €2.000-6.000 |
Vollständig headless kostet viel im Voraus, reduziert aber monatliche Ausgaben, da Sie das TYPO3-Hosting aufgeben. Unterschätzen Sie einfach nicht zusätzliches CMS-Bauen obendrauf.
Wann wählt man welches
TYPO3 + EXT:headless
- Mit Legacy-Content und etablierten Workflows bleiben.
- Vertraute Editorial-Einstellungen und umfangreiche Features bewahren.
- Von ausgefeilter nativer Multi-Language-Unterstützung profitieren.
- TYPO3-Entwickler behalten.
Next.js + Supabase
- Wenn von Grund auf neu anfangen.
- Die Anwendung benötigt viele interaktive Features.
- Ihr Dev-Team ist bereits JavaScript-fokussiert.
- Top-Performance-Speicherung ist ein Schlüsselfokus.
- Komfortabel, ein Headless-CMS hinzuzufügen.
Betrachten Sie einen dritten Winkel
Vielleicht kam Ihnen der Mix in den Sinn? Next.js, ein Headless-CMS, plus Supabase für App-Daten können das Beste kombinieren. Es bietet abgerundete Editorial-Tools ohne TYPO3-Gepäck. Wenn Sie auch andere Optionen wie Astro-Entwicklung für leichte inhaltslastige Sites in Betracht ziehen, schauen Sie sich das an.
Möchten Sie über Ihre spezifischen Bedürfnisse chatten? Wir sind hier, um zu helfen, Ihre einzigartige Situation zu bewerten—erreichen Sie uns, und wir versprechen eine ehrliche Bewertung, auch wenn es "bei dem bleiben, was Sie wissen" ist.
FAQ
Ist TYPO3 EXT:headless 2026 production-ready?
Ja, absolut. EXT:headless ist seit Version 3.x stabil und wird aktiv unterstützt. Version 4.x deckt TYPO3 v12 und v13 mit solider Content-Serialisierung, Menu-Generierung und Form-Handling ab. Ein Haufen großer Enterprise-Sites führen es in Production Setups durch, einschließlich Sektoren wie Regierung und Banking in Deutschland und Österreich.
Kann ich Next.js für ein TYPO3-Headless-Frontend verwenden?
Sicher, es ist eine Klassiker-Combo. Sie werden Next.js App Router mit Server Components nutzen, um Infos von TYPOs JSON-API zu holen. Preview-Integration ist das kniffligste Bit: Draft Mode einrichten und TYPO3 anleiten, es über Preview-URLs zu rufen. Glücklicherweise hat die Community hilfreiche Dokumentation, die Sie durch die Next.js-Paarung führt.
Wie vergleicht sich Supabase mit TYPOs Datenbank-Setup?
Oh, das sind Äpfel und Orangen. TYPO3 läuft auf Doctrine DBAL mit einem streng verwalteten Schema durch TCA. Supabase gibt diese süße PostgreSQL-Freiheit mit Row Level Security. Supabase bietet flexible und mächtige Abfragefähigkeit, aber TYPO3 ist sorgfältig strukturiert, um Fehler zu verhindern, die Editoren versehentlich einführen könnten. Es geht alles um Kontrolle versus Sicherheit.
SEO-Bedenken mit Headless-TYPO3? Behandlung von Meta-Tags und strukturierten Daten?
EXT:headless serialisiert Seiten-Properties wie Meta-Tags und Open Graph-Daten. Ihr Frontend muss sie als HTML-Tags rendern. Verwenden Sie die Metadata API von Next.js in Layouts. Solange Ihr TYPO3-Setup solid ist, sollten SEO-Daten folgen. Integrieren Sie Extensions wie EXT:yoast_seo und es spielt schön mit Headless-Konfigurationen.
Ist Supabase auf Enterprise-Level-Content-Delivery gewachsen?
Es ist sicher. Supabase Cloud, läuft auf AWS, bietet 99,9% Uptime auf Pro-Plänen und boosts zu 99,95% auf Team-Plänen (2026-Raten prüfen). Für CDN-Caching (Vercel's Edge Network, Cloudflare) stellt Supabase hauptsächlich Write- und Real-Time-Feature-Zuverlässigkeit sicher. Für kritische Enterprise-Nutzung, selbst-hosten Sie Supabase für maximale Kontrolle.
Wie gehen wir mit Bildverarbeitung ohne TYPO3 um?
TYPO3 verarbeitet Bilder nativ—Crop, Resize, Format Flip. Ohne es, richten Sie Ihren Bild-Workflow ein. 2026's Top-Anwärter sind: Next.js Image Optimization (eingebaut, Vercel-unterstützend), Cloudinary (Kick off kostenlos, ernsthafte Nutzung braucht bezahlte Pläne) oder imgix (ab €100+/Monat). Supabase Storage verwaltet Originale, aber keine Transformationen.
Können wir inkrementell von TYPO3 Headless zu vollständig Headless migrieren?
Absolut, denken Sie an einen glatten Plan. Beginnen Sie mit Headless-TYPO3, isolieren Sie Ihr Frontend. Verschieben Sie Content langsam von TYPO3 zu Supabase oder Ihrem gewählten CMS—starten Sie mit einfacheren Types. Während der Phase, Ihr Next.js-Frontend operiert mit Daten aus beiden Quellen.
Was ist die Lernkurve für ein TYPO3-Team, das zu Next.js + Supabase übergeht?
Ein realistisches Hochfahren ist etwa drei bis sechs Monate. Das heißt, die Herausforderung ist nicht JavaScript oder TypeScript—es ist das Paradigma-Shift. TYPO3-Entwickler sind es gewohnt, das Framework steuert Content-Strukturen, Caching und Routes. Im Next.js + Supabase-Modell sind diese Anrufe Ihre. Es ist befreiend, aber anfangs überwältigend. Pair Programming mit erfahrenen Next.js-Leuten macht diesen Sprung viel reibungsloser.