Ir al contenido principal
Ilustración: el distintivo de la versión Nexus 2.0 sobre una cuadrícula de paneles de dashboard

Nexus 2.0 es una actualización importante de la plantilla: una nueva base con Astro 7 y Tailwind CSS v4, worlds para cambiar la marca desde una sola línea de configuración y una biblioteca de componentes más amplia. Es el resultado de meses de trabajo de ingeniería, iteraciones de diseño y comentarios de la comunidad.

Novedades

Nexus 2.0 está construido sobre Astro 7 y Tailwind CSS v4. Las páginas se renderizan como HTML por defecto y el JavaScript en el cliente es opcional: la mayor parte de la interactividad son scripts simples que se ejecutan en el ciclo de vida astro:page-load de Astro, y React se usa solo para las islas de visualización de datos construidas con Recharts.

La experiencia de contenido se ha rediseñado en torno a las colecciones de contenido de Astro con validación de esquemas mediante Zod. Las publicaciones del blog, los perfiles de autor, las preguntas frecuentes, los servicios y los testimonios son colecciones tipadas, de modo que un campo ausente o una fecha mal formada hacen fallar la compilación en lugar de publicar una página rota.

Worlds: cambie la marca en un solo lugar

El mayor cambio de la versión 2.0 son los worlds. Un world es un preset de design tokens que cambia el aspecto de toda la plantilla, incluidos la paleta, las superficies, los radios, la densidad, el movimiento y la tipografía de titulares, a partir de una sola línea en nexus.config.ts:

world: { preset: "proof" },

Hoy se incluyen seis presets: nexus, la identidad neutra por defecto; proof, un portafolio de fotografía; automotive, un showroom en tonos champán y bronce; shop, una tienda cálida de productos artesanales; editorial, una pequeña revista; y enterprise, un sitio de producto de monitorización de infraestructura. Además del preset, puede ajustar radius, density, motion y material por separado. Los componentes solo leen tokens y nunca saben qué world está activo, así que un cambio de marca no implica rebuscar entre los archivos de componentes.

Una biblioteca de componentes más amplia

La biblioteca de componentes está organizada por capas para que pueda trabajar al nivel que mejor se adapte a cada tarea:

  • Primitivas de UI como Button, Card, Modal, Accordion, Combobox, DataGrid y DatePicker, cada una con props tipadas y variantes CVA.
  • Secciones como Hero, Features, Pricing, FAQ y CTA, para montar páginas de marketing rápidamente.
  • Composiciones de página para pantallas con muchos datos, incluidos layouts de ficha, dossier, dashboard y comparación.
  • Gráficos de área, barras, donut, líneas, radar, mapa de calor y barras de rango, con temas basados en los mismos tokens que todo lo demás.

Los componentes de datos siguen un conjunto común de estados (carga, vacío, error y datos), de modo que un dashboard nunca muestra un panel en blanco cuando falla una solicitud.

Pensado para proyectos reales

Varias bases de producción vienen incluidas en lugar de dejarse como ejercicio:

  • Cinco idiomas listos para usar: inglés, alemán, francés, español y búlgaro, en las páginas principales y el blog, con slugs de URL traducidos y un selector de idioma.
  • Temas claro y oscuro que siguen por defecto la configuración del sistema del visitante (configurable como oscuro o claro), con un selector que recuerda su elección.
  • Búsqueda en el sitio con Pagefind, un feed RSS, un sitemap e imágenes Open Graph generadas para las publicaciones del blog.
  • Autenticación opcional con Better Auth, que se activa con un único comando pnpm auth:enable.
  • Bases para el consentimiento de cookies y las páginas legales que usted configura según sus propios flujos de datos. Son un punto de partida, no asesoramiento legal.

Las funcionalidades se controlan con flags, y el comando pnpm prune:features elimina familias completas de funcionalidades que no necesita, con un modo de simulación que muestra el plan antes de cambiar nada.

Actualización

Nexus 2.0 es una reestructuración considerable, así que trate la actualización como una migración y no como un reemplazo directo. El camino más fiable es empezar con una copia nueva de la plantilla, elegir un world y trasladar su contenido y su configuración. Las colecciones de contenido le avisarán de inmediato si algún frontmatter ya no coincide con el esquema.

Próximos pasos

A continuación, seguiremos ampliando la biblioteca de componentes y los presets de worlds, y mejorando la documentación para adaptar cada receta a sus propios proyectos.

Compartir este artículo
astro performance