I've spent the last two years migrating enterprise TYPO3 installations to headless architectures. And you know what question comes up all the time? Should we keep TYPO3 and go headless with EXT:headless or ditch it for Next.js with something like Supabase? It's a bit of a head-scratcher, isn't it? Like most architecture decisions, the answer boils down to, "it depends." But let's break down exactly what it depends on.

This isn't academic for me. I've launched production sites with both approaches, sweat through those pesky edge cases, and seen teams either triumph or struggle—sometimes spectacularly—with each stack. Let's chat about what I've picked up along the way.

Understanding the Two Approaches

First thing's first, what are we even comparing here? These two are completely different beasts.

TYPO3 + EXT:headless (Decoupled)

With this, TYPO3 remains your CMS, handling all your content management backend tasks. The twist is, you swap out the old-school Fluid/TypoScript rendering for a JSON API. Your shiny new frontend? It could be React, Vue, whatever you fancy, gobbling up that API. TYPO3 keeps managing all the good stuff like models, permissions, and workflows.

The EXT:headless extension? That's the VIP backstage pass that gets into TYPO3's rendering process and outputs JSON instead of HTML. It’s not some add-on API either—it's the real deal working directly with TYPO3's content guts.

Next.js + Supabase (Fully Headless)

On the flip side, you've got Next.js managing your frontend and server-side logic. Supabase (a wild combo of PostgreSQL, auth, file storage, and real-time goodies) sorts your backend. No TYPO3 here at all, folks. You're ditching the old CMS for pure flexibility and a modern JS-native setup.

How EXT:headless Actually Works

When you slap ext:headless onto TYPO3, it registers a new page type that changes everything. No more handing content through Fluid templates; instead, it dishes out JSON.

Here's a taste of what you'll get:

{
  "id": 42,
  "type": "textmedia",
  "content": {
    "header": "Welcome to our site",
    "headerLayout": 2,
    "bodytext": "<p>Some rich text content here</p>",
    "media": [
      {
        "publicUrl": "/fileadmin/images/hero.webp",
        "properties": {
          "width": 1920,
          "height": 1080,
          "alt": "Hero image"
        }
      }
    ]
  },
  "appearance": {
    "layout": "default",
    "frameClass": "default",
    "spaceAfter": "medium"
  }
}

The frontend then connects these dots to React/Vue components. If you've tinkered with any component-based CMS, this will feel like your favorite old sweater.

Setting Up EXT:headless

A typical setup starts like this:

composer require friendsoftypo3/headless

And in your TypoScript:

plugin.tx_headless {
  settings {
    debug = 0
  }
}

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

Here's the kicker: For each custom content element in TYPO3, you need JSON serializers. For a site with, say, a handful of custom elements? You're looking at a couple of days' work. A massive enterprise setup with scores of elements? Brace yourself—this could take weeks.

What TYPO3 Headless Does Well

  • Editor experience stays intact. TYPO3's familiar backend means no retraining for content editors.
  • Preserve existing content. Your setups don't vanish. All your content, translations, and media? They stick around.
  • Multi-language support rocks. TYPO3 has some of the best language handling I've seen.
  • Enterprise-ready features. Everything from workspaces to scheduled publishing is ready to go.

The Catch with EXT:headless

  • TYPO3 isn't going anywhere. You'll need PHP-savvy folks who get TYPO3, and they aren't exactly everywhere.
  • Complex hosting. You're juggling PHP (TYPO3) and Node.js (your frontend). Double the fun, double the complexity.
  • Limited API interface. It's JSON, not GraphQL. Customization means diving back into TYPO3 extension development.
  • Preview headache. Integrating a real-time preview with TYPO3 and Next.js? Not for the faint of heart.

TYPO3 Headless Mode vs Next.js + Supabase: A Real Comparison

Next.js + Supabase: The Fully Headless Stack

The Layout

With this setup, Next.js takes care of your application layer, and Supabase swoops in for all database and backend tasks.

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

Content Management Without TYPO3

Here's where things get tricky. How do editors manage content?

  1. Custom admin panel. It’s more work than you'd think.
  2. Supabase Studio. Great for devs, editors might hate it.
  3. Add a CMS. Now managing three services.
  4. Use Payload with its own database. Pretty elegant in my book.

Just so you see, here's a basic content fetching implementation with 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
}

What Next.js + Supabase Shines At

  • Sky-high performance. Static generation, ISR, edge rendering — your playground for speed.
  • Developer galore. JavaScript/TypeScript folks are everywhere.
  • Supabase's Row Level Security. Seriously cool for when you want tight control.
  • Real-time features. Integrate live updates like a breeze.
  • Easy deployment. Use Vercel for Next.js and Supabase Cloud for backend or self-host if needed.

The Struggles Here

  • DIY CMS. Unless you throw another headless CMS into the mix, you're basically rolling your own.
  • Editorial black hole. No built-in workflows. Draft states, scheduled publishing? You've got to make them happen.
  • Language management. Multi-language content support? You'll sweat building that in-house.
  • Media management woes. Supabase storage isn't tailored for digital assets. Keep that in mind.

Head-to-Head Comparison

Take a look at how they stack up:

Feature TYPO3 + EXT:headless Next.js + Supabase
Editing UX Excellent Custom or added CMS
Multi-language Native DIY implementation
Workflows Built-in Custom build needed
Performance Good Excellent
API Limited Full control
Real-time Absent Supported
Auth Legacy Modern and flexible
Complexity High Medium
Talent pool Scarce Plentiful
Content migration Unnecessary Full migration
Features Baked-in Build or buy
Setup time 2-4 weeks 4-8 weeks
Cost (hosting) €150-500 €45-200

Performance Benchmarks

Let's see some numbers from a site I've tested—corporate site, 200 pages, multilingual support:

Metric 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? While uncached TTFB is better with Supabase, CDN caching pretty much levels the field. Both, when set up right, zip fast enough for the end-user.

TYPO3 Headless Mode vs Next.js + Supabase: A Real Comparison - architecture

Developer Experience and Team Considerations

Diving into TYPO3

You'll still need TYPO3 pros for headless projects. Think PHP serializers, testing upgrades, and handling compatibility issues. In 2025, these experts might set you back €80-120/hour. And some devs aren’t thrilled about headless setups—it takes the joy out of Fluid templating.

The Next.js + Supabase Club

JavaScript devs are plentiful, but remember designing content management systems doesn't come easy to everyone. Supabase's dev experience is quite slick: auto-generated TypeScript types, real-time subscriptions, and solid auth helpers. But all data modeling and architectural decisions? Those are all on you.

Pondering this route? Our team has honed expertise in Next.js development to help you sidestep nasty surprises.

Migration Strategies

From Traditional TYPO3 to TYPO3 Headless

Lower-risk, content remains intact. Primarily a front-end rewrite.

  1. Roll out EXT:headless
  2. Map content elements to JSON
  3. Craft the Next.js/Nuxt frontend
  4. Sort preview integration
  5. Go live!

Timeframe: 8-16 weeks for a decent-sized corporate site.

From TYPO3 to Next.js + Supabase

Hold onto your seats, this one's a full rebuild.

  1. Audit current content setups
  2. Sketch your PostgreSQL schema
  3. Write migration scripts
  4. Move media and file references
  5. Build editorial tools or integrate another CMS
  6. Build again for the frontend
  7. Deal with URL redirects
  8. Propagate multi-language content

Timeframe: 16-32 weeks. Complex headless development? Bring in pros to make life easier.

Cost Analysis

Let's tally it for a midsize corporate setup: 200 pages, 3 languages, 5 editors, 50K monthly visitors.

TYPO3 Headless — Year 1 Costs

Item Cost
TYPO3 Hosting (Managed) €3,600/year
Next.js Hosting (Vercel Pro) €240/year
Frontend Development €25,000-45,000
EXT:headless Integration €8,000-15,000
Total Year 1 €36,840-63,840
Ongoing Annual €5,000-8,000

Next.js + Supabase — Year 1 Costs

Item Cost
Supabase Pro €300/year
Vercel Pro €240/year
Add CMS (if needed) €0-3,600/year
Content Migration €10,000-20,000
Frontend + Backend Development €40,000-70,000
Editorial Tooling €10,000-25,000
Total Year 1 €60,540-119,140
Ongoing Annual €2,000-6,000

Going fully headless costs big upfront, but cuts down monthly expenses since you ditch TYPO3 hosting. Just don't underestimate extra CMS building on top.

When to Choose Which

TYPO3 + EXT:headless

  • Stick with legacy content and established workflows.
  • Keep familiar editorial settings and rich features.
  • Benefit from sophisticated native multi-language support.
  • Retain TYPO3 developers.

Next.js + Supabase

  • When starting from scratch.
  • The application needs ample interactive features.
  • Your dev team is already JavaScript-focused.
  • Keeping performance top-tier is a key focus.
  • Comfortable adding a headless CMS.

Consider a Third Angle

Maybe mixing it up did cross your mind? Next.js, a headless CMS, plus Supabase for app data can combine the best. It offers well-rounded editorial tools without TYPO3 baggage. If you're also eyeing options like Astro development for lightweight content-heavy sites, that's worth a look.

Want to chat about your specific needs? We're here to help assess what makes sense for your unique scenario—reach out, and we promise an honest evaluation, even if it's "stick with what you know."

FAQ

Is TYPO3 EXT:headless production-ready in 2025? Yep, absolutely. EXT:headless has been steady since version 3.x and is actively supported. Version 4.x covers TYPO3 v12 and v13 with solid content serialization, menu generation, and form handling. A bunch of huge enterprise sites run it in production setups, including sectors like government and banking in Germany and Austria.

Can I use Next.js for a TYPO3 headless frontend? For sure, it's a classic combo. You'll utilize Next.js App Router with server components to gather info from TYPO3's JSON API. Preview integration's the trickiest bit: setting up draft mode and directing TYPO3 to call it via preview URLs. Luckily, the community's helpful documentation guides you through the Next.js pairing.

How does Supabase compare to TYPO3's database setup? Oh, these are apples and oranges. TYPO3 runs on Doctrine DBAL with a stricter schema managed by TCA. Supabase gives that sweet PostgreSQL freedom with Row Level Security. Supabase provides a flexible and powerful querying ability, but TYPO3 is carefully structured to prevent mistakes that editors might accidentally introduce. It’s all about control versus security.

SEO concerns with headless TYPO3? Handling meta tags and structured data? EXT:headless does serialize page properties like meta tags and Open Graph data. Your frontend needs to render them as HTML tags. Use Next.js's Metadata API in layouts. So long as your TYPO3 setup is solid, SEO data should follow suit. Integrate extensions like EXT:yoast_seo and it’ll play nice with headless configurations.

Is Supabase up to enterprise-level content delivery? It sure is. Supabase Cloud, running on AWS, offers 99.9% uptime on Pro plans and boosts to 99.95% on Team plans (check 2025 rates). For CDN caching (Vercel's Edge Network, Cloudflare), Supabase primarily ensures write and real-time feature reliability. For critical enterprise usage, self-host Supabase for max control.

How do we tackle image processing without TYPO3? TYPO3 natively processes images—crop, resize, format flip. Without it, set up your image workflow. 2025's top contenders are: Next.js Image Optimization (built-in, Vercel-supportive), Cloudinary (kicking off for free, serious usage demands paid plans), or imgix (starting at $100+/month). Supabase Storage handles originals but not transformations.

Can we migrate incrementally from TYPO3 Headless to fully headless? Absolutely, think of it like a smooth plan. Begin with headless TYPO3, isolating your frontend. Slowly transition content from TYPO3 to Supabase or your chosen CMS — start with simpler types. During the phase, your Next.js frontend operates with data from both sources.

What's the learning curve like for a TYPO3 team transitioning to Next.js + Supabase? A realistic ramp-up is about three to six months. That said, the challenge isn’t JavaScript or TypeScript—it’s the paradigm shift. TYPO3 developers are used to the framework steering content structures, caching, and routes. In the Next.js + Supabase model, those calls are yours. It's liberating but overwhelming at first. Pair programming with seasoned Next.js folks makes this leap much smoother.