AGM – Agencia de Marketing Glocal
Migración Headless WordPress → Next.js con Implementación Pixel-Perfect desde Figma
Migración completa de una agencia de marketing internacional desde WordPress monolítico a arquitectura Headless con Next.js 15 como front-end y WordPress como CMS back-end puro. Diseño pixel-perfect trasladado directamente desde el archivo Figma del cliente.
[+] HIGHLIGHTS_ARQUITECTURA
- ▸Migración desde WordPress monolítico a arquitectura Headless: WordPress como CMS back-end, Next.js 15 como front-end desacoplado.
- ▸Implementación pixel-perfect desde archivo Figma del cliente sin desviaciones de diseño.
- ▸Integración con WPGraphQL para consumir posts, páginas y tipos de contenido personalizados (CPTs).
- ▸Soporte multilenguaje (ES / ZH) con rutas localizadas y SEO hreflang configurado.
- ▸Lighthouse Performance Score 96/100 en producción con TTFB < 80ms desde Vercel Edge.
- ▸Regeneración incremental (ISR) para actualización de contenido sin re-deploy completo.
El Reto: Modernizar sin Perder la Identidad
ARTU Glocal Marketing es una agencia de marketing estratégico con clientes en múltiples continentes (Argentina, España, Pakistán, Tailandia, Australia). Su sitio anterior operaba sobre WordPress monolítico con un tema personalizado: funcional, pero con limitaciones críticas de rendimiento, escalabilidad y mantenimiento.
El desafío fue triple: migrar sin interrumpir el flujo de contenido, implementar un diseño pixel-perfect desde Figma del equipo creativo y garantizar rendimiento de élite en todos los mercados objetivo.
Arquitectura Headless: WordPress como Back-End Puro
- WordPress + WPGraphQL: El CMS existente se conservó como fuente de verdad del contenido, añadiendo WPGraphQL para exponer posts, páginas, CPTs de Servicios y Casos de Éxito como API GraphQL tipada.
- Next.js 15 App Router: Front-end completamente nuevo sobre App Router con Server Components, generando las páginas de contenido estático en Build Time (SSG) y las secciones dinámicas con Incremental Static Regeneration (ISR).
- Vercel Edge Network: Despliegue en edge global con cache de activos en CDN y función de revalidación on-demand vía webhook de WordPress al publicar contenido.
Pixel-Perfect Figma → Código
El equipo de diseño de ARTU entregó un archivo Figma de alta fidelidad con todos los tokens de diseño documentados: sistema tipográfico (escala, pesos, interlineado), paleta de color primaria naranja/gris, componentes reutilizables (cards, botones, formularios, marquee de clientes) e interacciones definidas.
La implementación respetó cada especificación al píxel: espaciados con tokens CSS variables, animaciones de hover y scroll suaves, y un marquee de países clientes con pausa al hover.
Multi-idioma (ES / ZH)
- Rutas localizadas
/es/y/zh/con next-intl y detección automática por Accept-Language. - Sitemap multi-hreflang generado dinámicamente y metadatos Open Graph por idioma para máxima indexación en Google y Baidu.
Resultados en Producción
- Lighthouse Performance: 96/100 en producción real.
- TTFB: <80ms desde los principales mercados (EU, LATAM, APAC).
- Reducción de dependencias: Eliminación de 14 plugins de WordPress no críticos que impactaban el rendimiento del back-end.
- Flujo editorial intacto: El equipo de ARTU continuó publicando desde el mismo panel de WordPress sin ninguna curva de aprendizaje adicional.
