Ahau Tech
Sitio de contenido tech en español con headless CMS
- Rol
- Full Stack Developer / Arquitecto de software
- Cliente
- Proyecto propio
- Duración
- 2026-07-01 — 2026-07-10
- Año
- 2026
- Equipo
- 1 persona
Problema
¿Qué había que resolver?
La gestión de contenido y la optimización para motores de búsqueda son desafíos complejos en un entorno headless, especialmente cuando se requiere una experiencia de usuario superior y cumplimiento legal.
Solución
¿Cómo se resolvió?
Implementar una estrategia integral que combine la flexibilidad de un CMS headless con herramientas de optimización SEO y cumplimiento legal, garantizando una experiencia de usuario superior y visibilidad en línea.
Características
Lo que hace
- Modo oscuro/claro con script anti-flash
- Paginación basada en cursor
- Parser de shortcodes personalizados ([youtube], [affiliate])
- Tabla de contenidos dinámica con IntersectionObserver
- Botones de compartir (sidebar sticky en desktop, FAB en mobile)
- Panel de configuración de lectura (tamaño y familia de fuente, interlineado, ancho, alto contraste) persistente en localStorage
- Banner de cookies con GA4 consent mode (denegado por defecto)
- Sitemap, robots.txt y llms.txt generados dinámicamente
- Endpoint REST personalizado en WordPress para banners/enlaces de afiliados, protegido con API key
- Páginas legales conforme a legislación mexicana y disclosure de afiliados FTC
Responsabilidades
Mi rol en el proyecto
- Arquitectura completa del proyecto (frontend y estrategia headless CMS)
- Diseño de capa de datos desacoplada (/lib/wp, /lib/seo) sin lógica de negocio en componentes
- Implementación de ISR con revalidación por webhook desde WordPress
- Integración de WPGraphQL con mappers de normalización de datos
- Optimización SEO técnico (metadata dinámica, sitemap, datos estructurados)
- Desarrollo de UI reutilizable con Server Components por defecto
- Cumplimiento legal y de privacidad (México + disclosure de afiliados)
Retos técnicos
Lo que no fue trivial
Rutas dinámicas unificadas
Resolver conflicto de rutas dinámicas ([slug] vs [page]) unificándolas en una sola ruta con fallback post-then-page
Tailwind v4 sin config
Adaptar Tailwind v4 (sin tailwind.config.ts) usando @theme y @utility directamente en globals.css
Normalización de contenido WP
Normalizar comillas tipográficas de WordPress (”/″) que rompían el parsing de atributos en shortcodes
Imágenes duplicadas
Evitar duplicación de imágenes destacadas entre el layout y el contenido del artículo
Configuración next/image
Configurar next/image correctamente con remotePatterns para el dominio del CMS headless
Resultado
Qué se logró
- Plataforma funcional de contenido tech con arquitectura headless (Next.js + WordPress) completamente desacoplada
- Mejora significativa en rendimiento y experiencia de usuario gracias a ISR con revalidación por webhook
- Base sólida para escalabilidad de contenido y crecimiento SEO técnico (sitemap dinámico, metadata estructurada, robots.txt)
- Sistema de lectura altamente personalizable que mejora la retención del usuario (modo oscuro, tipografía, espaciado, alto contraste)
- Integración completa de analítica (GA4 con Consent Mode) y cumplimiento legal (privacidad y afiliados) lista para producción
- Arquitectura modular que permite iterar nuevas funcionalidades sin afectar la capa de datos ni SEO
- Separar estrictamente datos (/lib/wp), SEO (/lib/seo) y UI (/components) facilita mantenimiento a largo plazo
- Normalizar contenido HTML proveniente de WordPress antes de renderizarlo evita errores sutiles en producción
- ISR + revalidación por webhook ofrece un balance sólido entre performance y contenido actualizado sin necesidad de SSR completo