TYPO3 Headless vs Next.js + Supabase: Real Migration Data
Seu CTO encaminha a mensagem do Slack às 9:47 da manhã: "Podemos ir headless com TYPO3, ou reconstruímos em Next.js?" Você mantém o mesmo monólito TYPO3 desde 2018—templates TypoScript, parciais Fluid, uma pasta extensions com 40+ módulos customizados. Agora alguém leu um post sobre arquiteturas desacopladas, e seu roadmap acabou de desaparecer. Ao longo de dois anos, migrei seis sites TYPO3 em nível empresarial para stacks headless—três mantiveram TYPO3 via EXT:headless, três migraram para Next.js + Supabase. A decisão depende de três variáveis que a maioria das agências ignora, e a primeira não tem nada a ver com performance.
Isso não é acadêmico para mim. Lancei sites em produção com ambas as abordagens, suei com aqueles casos extremos complicados, e vi times triunfar ou lutar—às vezes espetacularmente—com cada stack. Vamos conversar sobre o que aprendi ao longo do caminho.
Entendendo as Duas Abordagens
Primeiro as coisas em primeiro lugar, o que estamos comparando aqui? Esses dois são bestas completamente diferentes.
TYPO3 + EXT:headless (Desacoplado)
Com isso, TYPO3 permanece seu CMS, gerenciando todas as tarefas de backend de gerenciamento de conteúdo. A reviravolta é que você troca a renderização Fluid/TypoScript antiga por uma API JSON. Seu novo frontend brilhante? Pode ser React, Vue, o que você quiser, consumindo essa API. TYPO3 continua gerenciando todas as coisas boas como modelos, permissões e workflows.
A extensão EXT:headless? Esse é o passe de backstage VIP que entra no processo de renderização do TYPO3 e produz JSON em vez de HTML. Não é apenas alguma API complementar—é o negócio real funcionando diretamente com as entranhas de conteúdo do TYPO3.
Next.js + Supabase (Completamente Headless)
Por outro lado, você tem Next.js gerenciando seu frontend e lógica do lado do servidor. Supabase (uma combinação selvagem de PostgreSQL, auth, armazenamento de arquivos e recursos em tempo real) organiza seu backend. Sem TYPO3 aqui, pessoal. Você está descartando o velho CMS por pura flexibilidade e uma configuração moderna nativa de JS.
Como EXT:headless Funciona de Verdade
Quando você coloca ext:headless no TYPO3, ele registra um novo tipo de página que muda tudo. Não mais entrega de conteúdo através de templates Fluid; em vez disso, oferece JSON.
Aqui está uma amostra do que você receberá:
{
"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"
}
}
O frontend então conecta esses pontos aos componentes React/Vue. Se você já mexeu com algum CMS baseado em componentes, isso vai se sentir como seu suéter antigo favorito.
Configurando EXT:headless
Uma configuração típica começa assim:
composer require friendsoftypo3/headless
E em seu TypoScript:
plugin.tx_headless {
settings {
debug = 0
}
}
page = PAGE
page {
typeNum = 0
10 = USER
10.userFunc = FriendsOfTYPO3\Headless\ContentObject\JsonContentObject->render
}
Aqui está o ponto crucial: para cada elemento de conteúdo customizado no TYPO3, você precisa de serializadores JSON. Para um site com, digamos, um punhado de elementos customizados? Você está olhando para um par de dias de trabalho. Uma configuração empresarial massiva com dezenas de elementos? Prepare-se—isso pode levar semanas.
O que TYPO3 Headless Faz Bem
- A experiência do editor permanece intacta. O backend familiar do TYPO3 significa sem treinamento para editores de conteúdo.
- Preserve conteúdo existente. Suas configurações não desaparecem. Todo seu conteúdo, traduções e mídia? Eles ficam por aqui.
- Suporte multilíngue brilha. TYPO3 tem alguns dos melhores tratamentos de idioma que já vi.
- Recursos prontos para empresa. Tudo, desde workspaces até publicação agendada, está pronto para usar.
O Contraponto com EXT:headless
- TYPO3 não vai a lugar nenhum. Você precisará de pessoas savvy em PHP que entendam TYPO3, e elas não estão exatamente em todos os lugares.
- Hospedagem complexa. Você está malabarando PHP (TYPO3) e Node.js (seu frontend). Dobro da diversão, dobro da complexidade.
- Interface de API limitada. É JSON, não GraphQL. Customização significa mergulhar novamente no desenvolvimento de extensões TYPO3.
- Dor de cabeça com preview. Integrar uma visualização em tempo real com TYPO3 e Next.js? Não é para os fracos de coração.
Next.js + Supabase: O Stack Completamente Headless
O Layout
Com essa configuração, Next.js cuida de sua camada de aplicação, e Supabase funciona para todas as tarefas de banco de dados e backend.
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Next.js │────▶│ Supabase │────▶│ PostgreSQL │
│ (App Router)│ │ (BaaS) │ │ (Database) │
└─────────────┘ └──────────────┘ └─────────────┘
Gerenciamento de Conteúdo Sem TYPO3
Aqui é onde as coisas ficam complicadas. Como editores gerenciam conteúdo?
- Painel de admin customizado. É mais trabalho do que você pensaria.
- Supabase Studio. Ótimo para devs, editores podem odiar.
- Adicione um CMS. Agora gerenciando três serviços.
- Use Payload com seu próprio banco de dados. Bastante elegante no meu livro.
Só para você ver, aqui está uma implementação básica de busca de conteúdo com 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
}
O que Next.js + Supabase Se Destaca
- Performance no topo. Geração estática, ISR, renderização edge — seu parque de diversões para velocidade.
- Desenvolvedores aos montes. Pessoal de JavaScript/TypeScript estão em todos os lugares.
- Row Level Security do Supabase. Seriamente legal para quando você quer controle rígido.
- Recursos em tempo real. Integre atualizações ao vivo como uma brisa.
- Fácil implantação. Use Vercel para Next.js e Supabase Cloud para backend ou auto-hospede se necessário.
Os Conflitos Aqui
- CMS DIY. A menos que você jogue outro CMS headless na mistura, você está basicamente rolando seu próprio.
- Buraco negro editorial. Sem workflows integrados. Estados de rascunho, publicação agendada? Você tem que fazê-los acontecer.
- Gerenciamento de idiomas. Suporte de conteúdo multilingue? Você vai suar construindo isso internamente.
- Problemas de gerenciamento de mídia. O armazenamento do Supabase não é adaptado para ativos digitais. Tenha isso em mente.
Comparação Lado a Lado
Veja como eles se comparam:
| Recurso | TYPO3 + EXT:headless | Next.js + Supabase | |---------|---------------------|--------------------|| | UX de Edição | Excelente | CMS Customizado ou Adicional | | Multilíngue | Nativo | Implementação DIY | | Workflows | Integrado | Compilação Customizada Necessária | | Performance | Boa | Excelente | | API | Limitada | Controle Total | | Tempo Real | Ausente | Suportado | | Auth | Legacy | Moderno e Flexível | | Complexidade | Alta | Média | | Pool de Talento | Escasso | Abundante | | Migração de Conteúdo | Desnecessária | Migração Completa | | Recursos | Integrado | Compilar ou Comprar | | Tempo de Setup | 2-4 semanas | 4-8 semanas | | Custo (hospedagem) | €150-500 | €45-200 |
Benchmarks de Performance
Vejamos alguns números de um site que testei—site corporativo, 200 páginas, suporte multilíngue:
| Métrica | TYPO3 Headless + Next.js | Next.js + Supabase (SSG) | |--------|--------------------------|-------------------------|| | TTFB (sem cache) | 280ms | 45ms | | TTFB (CDN em cache) | 35ms | 32ms | | LCP | 1.8s | 1.2s | | CLS | 0.02 | 0.01 | | Pontuação Lighthouse | 92 | 98 | | Tempo de compilação (completo) | 4m 20s | 1m 45s | | Resposta da API (p95) | 180ms | 22ms |
Fundo da linha? Enquanto TTFB sem cache é melhor com Supabase, o cache CDN praticamente iguala o campo. Ambos, quando configurados corretamente, funcionam rápido o suficiente para o usuário final.
Experiência do Desenvolvedor e Considerações da Equipe
Mergulhando no TYPO3
Você ainda precisará de profissionais TYPO3 para projetos headless. Pense em serializadores PHP, testes de upgrades e resolução de problemas de compatibilidade. Em 2026, esses especialistas podem custar €80-120/hora. E alguns devs não estão entusiasmados com configurações headless—tira a alegria de templating Fluid.
O Clube Next.js + Supabase
Devs JavaScript são abundantes, mas lembre-se que projetar sistemas de gerenciamento de conteúdo não é fácil para todos. A experiência de dev do Supabase é bastante elegante: tipos TypeScript auto-gerados, subscrições em tempo real e helpers de auth sólidos. Mas toda modelagem de dados e decisões arquiteturais? Tudo sobre você.
Pensando nessa rota? Nossa equipe refinou expertise em desenvolvimento Next.js para ajudá-lo a evitar surpresas desagradáveis.
Estratégias de Migração
Do TYPO3 Tradicional para TYPO3 Headless
Risco mais baixo, conteúdo permanece intacto. Principalmente uma reescrita de frontend.
- Implante EXT:headless
- Mapeie elementos de conteúdo para JSON
- Crie o frontend Next.js/Nuxt
- Organize integração de preview
- Vá ao vivo!
Tempo estimado: 8-16 semanas para um site corporativo de tamanho decente.
De TYPO3 para Next.js + Supabase
Prepare-se, este é uma reconstrução completa.
- Audite configurações de conteúdo atuais
- Desenhe seu esquema PostgreSQL
- Escreva scripts de migração
- Mova mídia e referências de arquivo
- Construa ferramentas editoriais ou integre outro CMS
- Construa novamente para o frontend
- Trate redirecionamentos de URL
- Propague conteúdo multilíngue
Tempo estimado: 16-32 semanas. Desenvolvimento headless complexo? Traga profissionais para facilitar a vida.
Análise de Custos
Vamos contar para uma configuração corporativa de tamanho médio: 200 páginas, 3 idiomas, 5 editores, 50K visitantes mensais.
TYPO3 Headless — Custos do Ano 1
| Item | Custo |
|---|---|
| Hospedagem TYPO3 (Gerenciada) | €3.600/ano |
| Hospedagem Next.js (Vercel Pro) | €240/ano |
| Desenvolvimento Frontend | €25.000-45.000 |
| Integração EXT:headless | €8.000-15.000 |
| Total Ano 1 | €36.840-63.840 |
| Anual em Andamento | €5.000-8.000 |
Next.js + Supabase — Custos do Ano 1
| Item | Custo |
|---|---|
| Supabase Pro | €300/ano |
| Vercel Pro | €240/ano |
| Adicione CMS (se necessário) | €0-3.600/ano |
| Migração de Conteúdo | €10.000-20.000 |
| Desenvolvimento Frontend + Backend | €40.000-70.000 |
| Ferramentas Editoriais | €10.000-25.000 |
| Total Ano 1 | €60.540-119.140 |
| Anual em Andamento | €2.000-6.000 |
Ir completamente headless custa bastante antecipadamente, mas reduz despesas mensais, já que você abandona hospedagem TYPO3. Apenas não subestime construção extra de CMS em cima.
Quando Escolher Qual
TYPO3 + EXT:headless
- Fique com conteúdo legado e workflows estabelecidos.
- Mantenha configurações editoriais familiares e recursos ricos.
- Beneficie-se do suporte nativo sofisticado de multilíngue.
- Retenha desenvolvedores TYPO3.
Next.js + Supabase
- Quando começar do zero.
- A aplicação precisa de muitos recursos interativos.
- Sua equipe de dev já é focada em JavaScript.
- Manter performance no topo é um foco chave.
- Confortável em adicionar um CMS headless.
Considere um Terceiro Ângulo
Talvez misturar um pouco tenha cruzado sua mente? Next.js, um CMS headless, mais Supabase para dados de aplicação pode combinar o melhor. Oferece ferramentas editoriais bem-arredondadas sem bagagem TYPO3. Se você também está olhando para opções como desenvolvimento Astro para sites leves com muitos conteúdos, vale a pena dar uma olhada.
Quer conversar sobre suas necessidades específicas? Estamos aqui para ajudar a avaliar o que faz sentido para seu cenário único—entre em contato, e prometemos uma avaliação honesta, mesmo que seja "fique com o que você conhece".
FAQ
O TYPO3 EXT:headless está pronto para produção em 2026?
Sim, absolutamente. EXT:headless tem sido estável desde a versão 3.x e é suportado ativamente. A versão 4.x cobre TYPO3 v12 e v13 com serialização de conteúdo sólida, geração de menu e manipulação de formulários. Um monte de sites empresariais enormes o executam em configurações de produção, incluindo setores como governo e banking na Alemanha e Áustria.
Posso usar Next.js para um frontend TYPO3 headless?
Com certeza, é um combo clássico. Você utilizará Next.js App Router com componentes de servidor para reunir informações da API JSON do TYPO3. Integração de preview é a parte mais complicada: configurar draft mode e direcionar TYPO3 para chamá-lo via URLs de preview. Felizmente, a documentação útil da comunidade o guia através do emparelhamento Next.js.
Como o Supabase se compara à configuração de banco de dados do TYPO3?
Oh, essas são maçãs e laranjas. TYPO3 roda em Doctrine DBAL com um esquema mais rígido gerenciado por TCA. Supabase oferece aquela liberdade PostgreSQL doce com Row Level Security. Supabase oferece capacidade de consulta flexível e poderosa, mas TYPO3 é cuidadosamente estruturado para evitar erros que editores podem acidentalmente introduzir. É tudo sobre controle versus segurança.
Preocupações com SEO com TYPO3 headless? Manipulando meta tags e dados estruturados?
EXT:headless serializa propriedades de página como meta tags e dados Open Graph. Seu frontend precisa renderizá-los como tags HTML. Use a Metadata API do Next.js em layouts. Contanto que sua configuração TYPO3 seja sólida, dados de SEO devem seguir o exemplo. Integre extensões como EXT:yoast_seo e vai funcionar bem com configurações headless.
O Supabase está à altura de entrega de conteúdo em nível empresarial?
Com certeza. Supabase Cloud, rodando em AWS, oferece 99,9% uptime em planos Pro e aumenta para 99,95% em planos Team (verifique taxas de 2026). Para cache CDN (Vercel's Edge Network, Cloudflare), Supabase garante principalmente confiabilidade de escrita e recursos em tempo real. Para uso empresarial crítico, auto-hospede Supabase para máximo controle.
Como abordamos processamento de imagem sem TYPO3?
TYPO3 processa imagens nativamente—cortar, redimensionar, flipar formato. Sem isso, configure seu workflow de imagem. Os principais contendentes de 2026 são: Next.js Image Optimization (integrado, favorável a Vercel), Cloudinary (kickoff gratuito, uso sério exige planos pagos), ou imgix (começando em $100+/mês). Supabase Storage manipula originais mas não transformações.
Podemos migrar incrementalmente de TYPO3 Headless para completamente headless?
Absolutamente, pense nisso como um plano suave. Comece com TYPO3 headless, isolando seu frontend. Transfira lentamente conteúdo de TYPO3 para Supabase ou seu CMS escolhido—comece com tipos mais simples. Durante a fase, seu frontend Next.js funciona com dados de ambas as fontes.
Qual é a curva de aprendizado para um time TYPO3 transitando para Next.js + Supabase?
Uma ramp-up realista é sobre três a seis meses. Dito isso, o desafio não é JavaScript ou TypeScript—é a mudança de paradigma. Desenvolvedores TYPO3 estão acostumados ao framework dirigindo estruturas de conteúdo, cache e rotas. No modelo Next.js + Supabase, essas chamadas são suas. É libertador mas esmagador no início. Pair programming com pessoal Next.js experiente torna este salto muito mais suave.