De años de trabajo con clientes a una base sólida con Next.js y Sanity

Durante años, el desarrollador frontend Edo enfrentó los mismos desafíos en cada proyecto: construir desde cero las bases técnicas que los clientes nunca veían pero que consumían días enteros. Esa repetición lo llevó a crear una arquitectura base reutilizable con Next.js y Sanity, pensada para eliminar la parte más costosa del desarrollo headless y convertirla en un punto de partida confiable para otros profesionales.

El trabajo con arquitecturas headless ofrece flexibilidad y potencia, pero también implica resolver una y otra vez los mismos problemas estructurales. Edo, un ingeniero frontend con casi una década de experiencia internacional, decidió abordar ese dilema desarrollando un kit de inicio completo que combina Next.js y Sanity, una herramienta que hoy sirve como cimiento para proyectos complejos de contenido y diseño.

Según Fuente original, la información se basa en From Years of Client Work to a Next.js + Sanity Starter Kit.

Next.js y Sanity starter kit: Cómo nació una arquitectura pensada para no empezar de cero

La idea surgió luego de repetir la misma rutina en cada nuevo proyecto: montar el frontend, configurar el estudio de Sanity, definir el modelado de páginas, reconstruir los webhooks, y volver a ajustar formularios y metadatos. En el proceso, tres días del presupuesto se perdían antes de mostrar un solo avance visual al cliente. Lo que al principio parecía un costo inevitable del enfoque headless se convirtió en un síntoma de ineficiencia estructural.

El punto de quiebre llegó cuando Edo advirtió que los mismos errores se repetían: migraciones que dañaban datasets, imágenes obsoletas en la CDN, sitemaps corrompidos o enlaces duplicados por webhooks defectuosos. Decidió entonces documentar y conservar cada corrección, integrándola a un repositorio propio que con el tiempo evolucionó en The Content Architecture, un kit de inicio que hoy sirve de base a todos sus desarrollos.

Un marco de decisiones técnicas para desarrollos consistentes

Más que un conjunto de componentes, esta arquitectura representa una serie de decisiones técnicas ya tomadas y documentadas. De esa forma, cada proyecto nuevo comienza en un punto avanzado, sin necesidad de rediscutir configuraciones básicas como el caché, las rutas o la estructura de datos. El enfoque reduce el margen de error y garantiza coherencia entre proyectos.

El diseño del sistema contempla desde la optimización del caché de datos hasta la invalidación automática de contenido obsoleto mediante webhooks precisos. Esto evita el clásico problema de contenido desactualizado que suele aparecer en los sitios headless. Cada regla se implementa una sola vez y se replica a lo largo de todos los proyectos.

Además, la arquitectura integra convenciones claras para trabajar con agentes de inteligencia artificial como Claude Code o Cursor. En lugar de generar estructuras diferentes en cada ejecución, el sistema ofrece un documento de referencia (AGENTS.md) y un conjunto de habilidades delimitadas que orientan al agente dentro de los lineamientos del proyecto. Así, la IA se convierte en una aliada en lugar de introducir inconsistencias.

Componentes que ahorran horas de desarrollo

Entre los elementos más valiosos del kit se destacan tres campos clave: el campo de enlaces, capaz de manejar referencias internas, URLs externas y correos electrónicos en un mismo esquema; el campo de medios, que unifica imágenes, videos y animaciones bajo un formato normalizado; y un constructor de páginas con límites definidos, pensado para evitar que los editores rompan la estructura del sitio. Todo está tipado y diseñado para un uso extensivo y seguro.

También se incluye una capa de obtención de datos (fetch layer) optimizada para ofrecer lecturas frescas en producción. El modo borrador y la vista previa funcionan sin interrupciones, eliminando la necesidad de reparaciones de último momento. El estudio de contenido de Sanity fue reorganizado para que los editores encuentren cada documento donde esperan, con tipos de páginas bloqueadas cuando corresponde.

SEO incorporado desde el primer commit

En muchos proyectos, la optimización para buscadores suele añadirse justo antes del lanzamiento. En este caso, el SEO está integrado desde el inicio: metadatos personalizados por página, generación automática de sitemap, imágenes OpenGraph recortadas con proporciones adecuadas y un robots.txt listo para desplegar. La estructura está diseñada para que ningún desarrollador deba reconstruir estas funciones básicas.

Un detalle innovador es la inclusión de un archivo llms.txt, orientado a mejorar la lectura de contenidos por parte de modelos de lenguaje. Este archivo, editable por los propios editores, permite ofrecer versiones en Markdown del contenido para que los agentes de IA obtengan información limpia y estructurada sin afectar la experiencia visual del sitio.

Automatización, seguridad y productividad

El kit también automatiza tareas que suelen consumir tiempo: autenticación básica para entornos de staging, formularios protegidos contra spam con Resend, gestión de redirecciones dentro de Sanity y transiciones suaves de vista. Además, cuenta con un script inicial que configura el proyecto completo: crea el entorno en Sanity, genera tokens, registra webhooks y define las variables de entorno sin intervención manual.

Las herramientas adicionales —Tailwind, Biome, Mux, Rive o Lottie— vienen preconfiguradas pero pueden eliminarse fácilmente. La base es flexible y la arquitectura permanece estable, lo que permite adaptar cada proyecto sin perder consistencia.

Una comunidad de uso real en proyectos premiados

La arquitectura no es un experimento teórico. Se utiliza en proyectos reales de alto nivel, algunos reconocidos por instituciones como Awwwards, FWA y CSSDA. Entre los sitios construidos sobre esta base se encuentran Good Fella, House of Honey, Aspen Search, Anuc Home, Serve Robotics, Muralia, Blink, WASL y Creative Lives in Progress. La consistencia técnica permitió dedicar más tiempo a la creatividad y menos a la configuración repetitiva.

Edo, además de creador del kit, sigue utilizándolo en sus propios proyectos. Cada error detectado en su trabajo semanal se convierte en una mejora para quienes adquieren la arquitectura. El modelo de distribución es simple: un único pago, actualizaciones de por vida y total propiedad del repositorio, sin licencias por usuario ni paneles externos.

Lo que representa para desarrolladores y estudios de contenido

Para agencias y desarrolladores independientes, esta base significa reducir los tiempos muertos de configuración y enfocarse en el valor visible del proyecto: diseño, animación y experiencia de usuario. En contextos donde los clientes demandan resultados ágiles y medibles, el ahorro de días en la etapa inicial puede marcar la diferencia entre un presupuesto rentable y un proyecto con pérdidas.

Al integrar buenas prácticas de arquitectura, documentación y SEO desde el inicio, los equipos pueden escalar su trabajo sin perder control sobre la calidad técnica. El sistema también facilita la colaboración entre humanos y agentes de IA, una tendencia que crece en el desarrollo web moderno.

Impacto directo en la visibilidad y el rendimiento SEO

La estructura propuesta por Edo tiene implicancias directas sobre la visibilidad orgánica y la eficiencia de indexación. Al incluir metadatos automáticos, sitemaps dinámicos y gestión inteligente del caché, los sitios construidos con esta base mantienen su contenido actualizado para rastreadores sin depender de tareas manuales. Además, el uso de llms.txt abre una nueva puerta para el SEO orientado a inteligencia artificial, facilitando que los modelos de lenguaje comprendan el contenido de manera precisa.

En el ecosistema digital, donde la velocidad de carga, la coherencia semántica y la claridad estructural son factores de posicionamiento clave, una arquitectura como esta ofrece una ventaja competitiva real. Los equipos que la adopten pueden destinar más recursos a estrategias de contenido y menos a mantenimiento técnico.

La nota completa sobre el proyecto original puede consultarse en Codrops, donde Edo explica en detalle las motivaciones y decisiones detrás de esta arquitectura.