CMS WordPress sin interfaz con Next.js, ACF y Arquitectura de Componentes Reutilizables

Construimos una arquitectura headless de WordPress + Next.js utilizando Advanced Custom Fields (ACF) como capa flexible de modelado de contenido, un sistema de componentes reutilizables en el frontend y optimización SEO automatizada en todo el proceso.

Arquitectura

• CMS: WordPress (sin interfaz) con ACF Pro para el modelado de contenido estructurado
• Capa de API: WPGraphQL + WPGraphQL para ACF para exponer contenido tipado a través de GraphQL
• Frontend: Next.js con App Router, React Server Components, TypeScript
• Estilo: Tailwind CSS para un estilo centrado en utilidades y alineado con el sistema de diseño
• SEO: API de metadatos de Next.js, datos estructurados JSON-LD, generación automática de sitemaps
• Alojamiento: Vercel (frontend) + alojamiento de WordPress gestionado (CMS)
• Medios: Optimización de imágenes de Next.js con la biblioteca de medios de WordPress como fuente

Modelado de Contenido con ACF

Campos de Contenido Flexible

Los campos ACF Flexible Content permiten a los editores componer páginas a partir de bloques de contenido predefinidos. Cada bloque se asigna directamente a un componente React en el frontend, cubriendo patrones comunes como secciones de héroe, cuadrículas de características, carruseles de testimonios, CTAs, acordeones de preguntas frecuentes, contadores de estadísticas, diseños de imagen-texto, incrustaciones de video, tablas de precios y feeds de blog.

Campos de Repetidor y Grupo

• Campos repetidores para listas (miembros del equipo, elementos de portafolio, entradas de cronología)
• Campos de grupo para datos anidados estructurados (bloques de dirección, enlaces sociales, anulaciones de SEO)
• Campos de relación para vincular publicaciones, páginas y tipos de publicaciones personalizadas
• Páginas de opciones para configuraciones globales (encabezado, pie de página, enlaces sociales, colores de marca)

Arquitectura de Componentes Reutilizables

Principios de Diseño de Componentes

El frontend sigue una arquitectura modular con capas distintas:

• Componentes de bloque — Un componente React por bloque de ACF Flexible Content
• Componentes de UI primitivos — Elementos reutilizables como botones, tarjetas e insignias
• Componentes de diseño — Encabezado, pie de página, navegación y envoltorios de contenedor
• Componentes SEO — Generadores de esquema y utilidades de metaetiquetas

Patrón de Resolución de Bloques

Un resolvedor central mapea los tipos de bloques de ACF a componentes React, permitiendo a los editores componer páginas sin la intervención de un desarrollador:

1. El editor de WordPress selecciona bloques de un menú desplegable y rellena los campos
2. WPGraphQL expone la página como JSON estructurado con tipos de bloques y datos de campo
3. Next.js obtiene los datos de la página en tiempo de construcción (ISR) o en tiempo de solicitud (SSR)
4. El resolvedor de bloques itera a través del array de bloques y renderiza el componente React correspondiente
5. Cada componente recibe sus datos de campo ACF como props tipadas

Optimización SEO

SEO Técnico

• Metaetiquetas dinámicas — Etiquetas de título, descripción, Open Graph y Twitter Card generadas por página a partir de datos del CMS
• URLs canónicas — Generación automática de etiquetas canónicas que previenen contenido duplicado
• Generación de Sitemap — Sitemap XML dinámico construido a partir de datos de páginas/publicaciones de WordPress en tiempo de construcción
• robots.txt — Generación programática con reglas conscientes del entorno
• Datos Estructurados — Esquema JSON-LD para tipos Organization, Article, FAQ, BreadcrumbList y Product

SEO de Rendimiento (Core Web Vitals)

• Generación Estática (ISR) — Páginas prerrenderizadas y revalidadas al cambiar el contenido mediante webhook
• Optimización de Imágenes — Conversión automática a WebP/AVIF, carga diferida (lazy loading), srcset responsivo
• Optimización de Fuentes — Carga de fuentes personalizadas sin cambios de diseño (zero-layout-shift)
• Code Splitting — División automática de código por ruta con React Server Components
• Almacenamiento en Caché en el Borde (Edge Caching) — Red global de borde para un TTFB inferior a 100ms

SEO de Contenido

• Campos SEO por página — Anulación de meta título, descripción e imagen OG a través de campos personalizados
• Migas de pan — Navegación de migas de pan autogenerada con marcado de esquema
• Enlaces Internos — Los campos de relación permiten sugerencias de enlaces internos estructurados
• Aplicación de Texto Alternativo — Texto alternativo obligatorio en todos los campos de imagen

Flujo de Datos de WordPress a Next.js

1. Cambio de Contenido — El editor publica o actualiza contenido en el panel de administración de WordPress
2. Activador de Webhook — WordPress envía un webhook al endpoint de revalidación de Next.js
3. Revalidación ISR — Next.js regenera solo las páginas afectadas
4. Invalidación de CDN — Páginas actualizadas servidas desde el borde en segundos tras la publicación

Características Clave

1. Constructor Visual de Páginas — Los editores componen páginas a partir de bloques ACF sin tocar código
2. API de Contenido Tipado — WPGraphQL + ACF proporciona un esquema GraphQL completamente tipado
3. Biblioteca de Componentes — Más de 10 bloques reutilizables que cubren todos los patrones comunes de páginas de marketing
4. ISR + Webhooks — Actualizaciones de contenido reflejadas en el sitio en vivo en segundos
5. Automatización SEO — Datos estructurados, sitemaps y metaetiquetas generados a partir de datos del CMS
6. Core Web Vitals — Imágenes, fuentes y code splitting optimizados para las mejores puntuaciones de Lighthouse
7. Modo de Vista Previa — El botón de vista previa de WordPress muestra el contenido borrador en el frontend de Next.js
8. Preparado para Múltiples Idiomas — Integración de ACF + WPML/Polylang para contenido internacionalizado