TYPO3 Headless vs Next.js + Supabase: Datos Reales de Migración
Tu CTO reenvía el mensaje de Slack a las 9:47 a.m.: "¿Podemos ir headless con TYPO3, o reconstruimos en Next.js?" Has mantenido el mismo monolito TYPO3 desde 2018—plantillas TypoScript, parciales Fluid, una carpeta de extensiones con más de 40 módulos personalizados. Ahora alguien leyó un artículo de blog sobre arquitecturas desacopladas, y tu roadmap acaba de evaporarse. Durante dos años he migrado seis sitios TYPO3 empresariales a pilas headless—tres mantuvieron TYPO3 vía EXT:headless, tres migraron a Next.js + Supabase. La decisión depende de tres variables que la mayoría de agencias ignoran, y la primera no tiene nada que ver con el rendimiento.
Esto no es académico para mí. He lanzado sitios de producción con ambos enfoques, sudado a través de esos casos extremos complicados, y visto a equipos triunfar o luchar—a veces espectacularmente—con cada pila. Hablemos sobre lo que he aprendido en el camino.
Comprendiendo los Dos Enfoques
Primero lo primero, ¿qué estamos comparando aquí? Estos dos son bestias completamente diferentes.
TYPO3 + EXT:headless (Desacoplado)
Con esto, TYPO3 sigue siendo tu CMS, manejando todas tus tareas de gestión de contenido de backend. El giro es que cambias el renderizado antiguo de Fluid/TypoScript por una API JSON. ¿Tu nuevo frontend brillante? Podría ser React, Vue, lo que prefieras, consumiendo esa API. TYPO3 sigue manejando lo bueno como modelos, permisos y flujos de trabajo.
La extensión EXT:headless? Ese es el pase VIP detrás de escenas que accede al proceso de renderizado de TYPO3 y produce JSON en lugar de HTML. No es solo un complemento API—es lo real funcionando directamente con las entrañas del contenido de TYPO3.
Next.js + Supabase (Completamente Headless)
Por otro lado, tienes Next.js manejando tu frontend y lógica del lado del servidor. Supabase (una combinación salvaje de PostgreSQL, autenticación, almacenamiento de archivos y características en tiempo real) se encarga de tu backend. Sin TYPO3 aquí en absoluto. Estás dejando el antiguo CMS para pura flexibilidad y una configuración moderna nativa de JS.
Cómo Funciona Realmente EXT:headless
Cuando añades ext:headless a TYPO3, registra un nuevo tipo de página que lo cambia todo. Sin más pasar contenido a través de plantillas Fluid; en su lugar, entrega JSON.
Aquí hay un poco de lo que obtendrás:
{
"id": 42,
"type": "textmedia",
"content": {
"header": "Bienvenido a nuestro sitio",
"headerLayout": 2,
"bodytext": "<p>Algún contenido de texto enriquecido aquí</p>",
"media": [
{
"publicUrl": "/fileadmin/images/hero.webp",
"properties": {
"width": 1920,
"height": 1080,
"alt": "Imagen hero"
}
}
]
},
"appearance": {
"layout": "default",
"frameClass": "default",
"spaceAfter": "medium"
}
}
El frontend luego conecta estos puntos a componentes React/Vue. Si has jugado con algún CMS basado en componentes, esto se sentirá como tu suéter viejo favorito.
Configurando EXT:headless
Una configuración típica comienza así:
composer require friendsoftypo3/headless
Y en tu TypoScript:
plugin.tx_headless {
settings {
debug = 0
}
}
page = PAGE
page {
typeNum = 0
10 = USER
10.userFunc = FriendsOfTYPO3\Headless\ContentObject\JsonContentObject->render
}
Aquí está el problema: Para cada elemento de contenido personalizado en TYPO3, necesitas serializadores JSON. Para un sitio con, digamos, un puñado de elementos personalizados, estás mirando un par de días de trabajo. ¿Una configuración empresarial masiva con decenas de elementos? Prepárate—esto podría tomar semanas.
Lo que TYPO3 Headless Hace Bien
- La experiencia del editor permanece intacta. El backend familiar de TYPO3 significa sin reentrenamiento para editores de contenido.
- Conserva contenido existente. Tus configuraciones no desaparecen. Todo tu contenido, traducciones y medios, se quedan.
- El soporte multilingüe es excelente. TYPO3 tiene algunos de los mejores manejo de idiomas que he visto.
- Características listas para empresas. Todo desde espacios de trabajo hasta publicación programada está listo.
El Inconveniente con EXT:headless
- TYPO3 no va a ningún lado. Necesitarás personas versadas en PHP que entiendan TYPO3, y no están exactamente por todas partes.
- Alojamiento complejo. Estás malabareando PHP (TYPO3) y Node.js (tu frontend). Doble diversión, doble complejidad.
- Interfaz API limitada. Es JSON, no GraphQL. La personalización significa sumergirse nuevamente en desarrollo de extensiones TYPO3.
- Dolor de vista previa. ¿Integrar una vista previa en tiempo real con TYPO3 y Next.js? No es para los débiles de corazón.
Next.js + Supabase: La Pila Completamente Headless
El Diseño
Con esta configuración, Next.js se encarga de tu capa de aplicación, y Supabase entra en picada para todas las tareas de base de datos y backend.
┌─────────────┐ ┌──────────────┐ ┌─────────────┐
│ Next.js │────▶│ Supabase │────▶│ PostgreSQL │
│ (App Router)│ │ (BaaS) │ │ (Database) │
└─────────────┘ └──────────────┘ └─────────────┘
Gestión de Contenido Sin TYPO3
Aquí es donde se pone complicado. ¿Cómo gestionan los editores el contenido?
- Panel de administración personalizado. Es más trabajo de lo que crees.
- Supabase Studio. Excelente para devs, a los editores podría no gustarles.
- Añade un CMS. Ahora gestionando tres servicios.
- Usa Payload con su propia base de datos. Bastante elegante en mi opinión.
Solo para que veas, aquí hay una implementación básica de obtención de contenido con 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
}
Lo que Next.js + Supabase Destaca
- Rendimiento de primera categoría. Generación estática, ISR, renderizado edge—tu patio de juegos para velocidad.
- Desarrolladores en abundancia. Gente de JavaScript/TypeScript está por todas partes.
- Row Level Security de Supabase. Seriamente cool para cuando quieres control estricto.
- Características en tiempo real. Integra actualizaciones en vivo como una brisa.
- Despliegue fácil. Usa Vercel para Next.js y Supabase Cloud para backend u auto-aloja si es necesario.
Las Luchas Aquí
- CMS DIY. A menos que metas otro CMS headless en la mezcla, básicamente estás construyendo el tuyo.
- Agujero negro editorial. Sin flujos de trabajo integrados. Estados de borrador, publicación programada, ¿los tienes que hacer suceder.
- Gestión de idiomas. ¿Soporte de contenido multilingüe? Sudará construyendo eso internamente.
- Problemas de gestión de medios. El almacenamiento de Supabase no está diseñado para activos digitales. Ten eso en mente.
Comparación Cara a Cara
Mira cómo se comparan:
| Característica | TYPO3 + EXT:headless | Next.js + Supabase |
|---|---|---|
| UX de Edición | Excelente | CMS Personalizado o Añadido |
| Multilingüe | Nativo | Implementación DIY |
| Flujos de Trabajo | Integrado | Construcción Personalizada Necesaria |
| Rendimiento | Bueno | Excelente |
| API | Limitado | Control Total |
| Tiempo Real | Ausente | Soportado |
| Autenticación | Heredado | Moderno y Flexible |
| Complejidad | Alta | Media |
| Grupo de Talento | Escaso | Abundante |
| Migración de Contenido | Innecesaria | Migración Completa |
| Características | Integradas | Construir o Comprar |
| Tiempo de Configuración | 2-4 semanas | 4-8 semanas |
| Coste (Hosting) | €150-500 | €45-200 |
Puntos de Referencia de Rendimiento
Veamos algunos números de un sitio que he probado—sitio corporativo, 200 páginas, soporte multilingüe:
| Métrica | TYPO3 Headless + Next.js | Next.js + Supabase (SSG) |
|---|---|---|
| TTFB (sin caché) | 280ms | 45ms |
| TTFB (caché CDN) | 35ms | 32ms |
| LCP | 1.8s | 1.2s |
| CLS | 0.02 | 0.01 |
| Puntuación Lighthouse | 92 | 98 |
| Tiempo de Compilación (completo) | 4m 20s | 1m 45s |
| Respuesta API (p95) | 180ms | 22ms |
¿Resultado final? Aunque el TTFB sin caché es mejor con Supabase, el almacenamiento en caché de CDN prácticamente iguala el campo. Ambos, cuando se configuran correctamente, van lo suficientemente rápido para el usuario final.
Experiencia del Desarrollador y Consideraciones del Equipo
Sumergirse en TYPO3
Aún necesitarás profesionales de TYPO3 para proyectos headless. Piensa en serializadores PHP, pruebas de actualizaciones y manejo de problemas de compatibilidad. En 2026, estos expertos podrían costarte €80-120/hora. Y algunos devs no están entusiasmados con configuraciones headless—quita la alegría de las plantillas Fluid.
El Club de Next.js + Supabase
Los devs de JavaScript son abundantes, pero recuerda que diseñar sistemas de gestión de contenido no es fácil para todos. La experiencia de desarrollador de Supabase es bastante elegante: tipos TypeScript generados automáticamente, suscripciones en tiempo real y ayudantes de autenticación sólidos. Pero todas las decisiones de modelado de datos y arquitectura, ¿las decisiones son todas tuyas.
¿Contemplando esta ruta? Nuestro equipo ha perfeccionado experiencia en desarrollo Next.js para ayudarte a evitar sorpresas desagradables.
Estrategias de Migración
De TYPO3 Tradicional a TYPO3 Headless
Bajo riesgo, el contenido permanece intacto. Principalmente una reescritura de frontend.
- Implementa EXT:headless
- Asigna elementos de contenido a JSON
- Crea el frontend Next.js/Nuxt
- Resuelve la integración de vista previa
- ¡Ve en vivo!
Marco de tiempo: 8-16 semanas para un sitio corporativo de tamaño decente.
De TYPO3 a Next.js + Supabase
Agarrate, este es una reconstrucción completa.
- Audita configuraciones de contenido actuales
- Esboza tu esquema de PostgreSQL
- Escribe scripts de migración
- Mueve medios y referencias de archivos
- Construye herramientas editoriales o integra otro CMS
- Construye nuevamente para el frontend
- Lidia con redirecciones de URL
- Propaga contenido multilingüe
Marco de tiempo: 16-32 semanas. ¿Desarrollo headless complejo? Trae profesionales para hacer la vida más fácil.
Análisis de Costes
Tallemos para una configuración corporativa de tamaño mediano: 200 páginas, 3 idiomas, 5 editores, 50K visitantes mensuales.
Costes de TYPO3 Headless — Año 1
| Artículo | Coste |
|---|---|
| Alojamiento TYPO3 (Gestionado) | €3,600/año |
| Alojamiento Next.js (Vercel Pro) | €240/año |
| Desarrollo de Frontend | €25,000-45,000 |
| Integración EXT:headless | €8,000-15,000 |
| Total Año 1 | €36,840-63,840 |
| Anual Continuo | €5,000-8,000 |
Costes de Next.js + Supabase — Año 1
| Artículo | Coste |
|---|---|
| Supabase Pro | €300/año |
| Vercel Pro | €240/año |
| Añade CMS (si es necesario) | €0-3,600/año |
| Migración de Contenido | €10,000-20,000 |
| Desarrollo de Frontend + Backend | €40,000-70,000 |
| Herramientas Editoriales | €10,000-25,000 |
| Total Año 1 | €60,540-119,140 |
| Anual Continuo | €2,000-6,000 |
Ir completamente headless cuesta mucho por adelantado, pero reduce gastos mensuales ya que deshaces el alojamiento de TYPO3. Solo no subestimes construcción adicional de CMS encima.
Cuándo Elegir Cuál
TYPO3 + EXT:headless
- Mantente con contenido heredado y flujos de trabajo establecidos.
- Conserva configuraciones editoriales familiares y características ricas.
- Benefíciate del soporte multilingüe nativo sofisticado.
- Retén desarrolladores de TYPO3.
Next.js + Supabase
- Cuando comienzas desde cero.
- La aplicación necesita amplias características interactivas.
- Tu equipo de devs ya está enfocado en JavaScript.
- Mantener el rendimiento de primera categoría es un enfoque clave.
- Cómodo agregando un CMS headless.
Considera un Tercer Ángulo
¿Quizás mezclar cruzó tu mente? Next.js, un CMS headless, más Supabase para datos de aplicación pueden combinar lo mejor. Ofrece herramientas editoriales bien redondeadas sin bagaje TYPO3. Si también estás considerando opciones como desarrollo Astro para sitios livianos intensivos en contenido, eso vale la pena mirar.
¿Quieres hablar sobre tus necesidades específicas? Estamos aquí para ayudarte a evaluar qué tiene sentido para tu escenario único—ponte en contacto, y promete una evaluación honesta, incluso si es "mantén lo que sabes".
Preguntas Frecuentes
¿Está TYPO3 EXT:headless listo para producción en 2026? Claro, absolutamente. EXT:headless ha sido estable desde la versión 3.x y está activamente soportado. La versión 4.x cubre TYPO3 v12 y v13 con serialización de contenido sólida, generación de menú y manejo de formularios. Un montón de enormes sitios empresariales lo ejecutan en configuraciones de producción, incluyendo sectores como gobierno y banca en Alemania y Austria.
¿Puedo usar Next.js para un frontend TYPO3 headless? Claro, es una combinación clásica. Utilizarás Next.js App Router con componentes de servidor para reunir información de la API JSON de TYPO3. La integración de vista previa es la parte más complicada: configurar el modo de borrador y dirigir TYPO3 para llamarlo a través de URLs de vista previa. Afortunadamente, la documentación útil de la comunidad te guía a través del emparejamiento de Next.js.
¿Cómo se compara Supabase con la configuración de base de datos de TYPO3? Oh, estas son manzanas y naranjas. TYPO3 se ejecuta en Doctrine DBAL con un esquema más estricto gestionado por TCA. Supabase proporciona esa dulce libertad de PostgreSQL con Row Level Security. Supabase proporciona capacidad de consulta flexible y poderosa, pero TYPO3 está cuidadosamente estructurado para prevenir errores que los editores podrían introducir accidentalmente. Es todo sobre control versus seguridad.
¿Preocupaciones SEO con TYPO3 headless? ¿Manejando meta tags y datos estructurados?
EXT:headless serializa propiedades de página como meta tags y datos de Open Graph. Tu frontend necesita renderizarlos como etiquetas HTML. Usa la API de Metadatos de Next.js en diseños. Siempre que tu configuración TYPO3 sea sólida, los datos SEO deberían seguir el traje. Integra extensiones como EXT:yoast_seo y jugará bien con configuraciones headless.
¿Está Supabase a la altura de la entrega de contenido a nivel empresarial? Claro que sí. Supabase Cloud, ejecutándose en AWS, ofrece 99.9% de tiempo de actividad en planes Pro y se amplía a 99.95% en planes de Equipo (verifica las tarifas de 2026). Para almacenamiento en caché de CDN (Red Edge de Vercel, Cloudflare), Supabase asegura principalmente la confiabilidad de escritura y características en tiempo real. Para uso empresarial crítico, auto-aloja Supabase para máximo control.
¿Cómo abordamos el procesamiento de imágenes sin TYPO3? TYPO3 procesa imágenes de forma nativa—recorte, cambio de tamaño, cambio de formato. Sin él, configura tu flujo de trabajo de imagen. Los contendientes principales de 2026 son: Next.js Image Optimization (integrado, compatible con Vercel), Cloudinary (iniciándose de forma gratuita, el uso serio exige planes pagos), o imgix (comenzando en €100+/mes). El almacenamiento de Supabase maneja originales pero no transformaciones.
¿Podemos migrar incrementalmente de TYPO3 Headless a completamente headless? Absolutamente, piensa en ello como un plan suave. Comienza con TYPO3 headless, aislando tu frontend. Transiciona lentamente contenido de TYPO3 a Supabase o tu CMS elegido—comienza con tipos más simples. Durante la fase, tu frontend de Next.js opera con datos de ambas fuentes.
¿Cuál es la curva de aprendizaje para un equipo de TYPO3 haciendo la transición a Next.js + Supabase? Una rampa realista es de aproximadamente tres a seis meses. Dicho esto, el desafío no es JavaScript o TypeScript—es el cambio de paradigma. Los desarrolladores de TYPO3 están acostumbrados a que el framework dirija estructuras de contenido, almacenamiento en caché y rutas. En el modelo Next.js + Supabase, esas llamadas son tuyas. Es liberador pero abrumador al principio. La programación en pareja con profesionales experimentados de Next.js hace este salto mucho más suave.