Zum Hauptinhalt springen

Nexus 2.0: Ein neues Kapitel

Nexus 2.0 ist da: Island-Architektur, typisierte Content Collections, moderne Bildformate und selbst gehostete Schriften.

James Mitchell James Mitchell
3 Min. Lesezeit
Illustration: das Nexus-2.0-Release-Logo über einem Raster aus Dashboard-Panels

Nexus 2.0 ist ein großes Update des Templates: eine neue Grundlage aus Astro 7 und Tailwind CSS v4, Welten für ein Rebranding über eine einzige Konfigurationszeile und eine größere Komponentenbibliothek. Darin stecken Monate an Entwicklungsarbeit, Design-Iterationen und Community-Feedback.

Was ist neu

Nexus 2.0 basiert auf Astro 7 und Tailwind CSS v4. Seiten werden standardmäßig zu HTML gerendert, und clientseitiges JavaScript ist optional: Der Großteil der Interaktivität besteht aus einfachen Skripten, die im astro:page-load-Lebenszyklus von Astro laufen, und React wird nur für die Islands zur Datenvisualisierung auf Basis von Recharts eingesetzt.

Die Inhaltsverwaltung wurde rund um Astro Content Collections mit Zod-Schemavalidierung grundlegend überarbeitet. Blogbeiträge, Autorenprofile, FAQs, Leistungen und Kundenstimmen sind typisierte Collections, sodass ein fehlendes Feld oder ein fehlerhaftes Datum den Build scheitern lässt, statt eine defekte Seite auszuliefern.

Worlds: Rebranding an einer Stelle

Die größte Neuerung in 2.0 sind die Welten (Worlds). Eine Welt ist ein Design-Token-Preset, das das gesamte Template neu einkleidet – einschließlich Palette, Oberflächen, Radien, Dichte, Bewegung und Display-Schrift – und zwar mit einer einzigen Zeile in nexus.config.ts:

world: { preset: "proof" },

Fünf Presets sind bereits enthalten: nexus, die neutrale Standardidentität; proof, ein Fotografie-Portfolio; shop, ein warmer Onlineshop für Manufakturware; editorial, ein kleines Magazin; und enterprise, eine Produktseite für Infrastruktur-Monitoring. Über das Preset hinaus können Sie radius, density, motion und material einzeln anpassen. Komponenten lesen ausschließlich Tokens und wissen nie, welche Welt aktiv ist – ein Rebranding bedeutet also nicht, sich durch Komponentendateien zu suchen.

Eine größere Komponentenbibliothek

Die Komponentenbibliothek ist in Ebenen organisiert, sodass Sie auf der Ebene arbeiten können, die zur Aufgabe passt:

  • UI-Primitives wie Button, Card, Modal, Accordion, Combobox, DataGrid und DatePicker, jeweils mit typisierten Props und CVA-Varianten.
  • Sections wie Hero, Features, Pricing, FAQ und CTA, mit denen sich Marketingseiten schnell zusammenstellen lassen.
  • Seitenkompositionen für datenintensive Ansichten, darunter Layouts für Datensätze, Dossiers, Dashboards und Vergleiche.
  • Diagramme, darunter Flächen-, Balken-, Donut-, Linien-, Radar-, Heatmap- und Bereichsbalkendiagramme, gestaltet aus denselben Tokens wie alles andere.

Datenkomponenten folgen einem gemeinsamen Satz an Zuständen (Laden, leer, Fehler und Daten), sodass ein Dashboard nie ein leeres Panel zeigt, wenn eine Anfrage fehlschlägt.

Gebaut für echte Projekte

Mehrere produktionsreife Grundlagen sind bereits enthalten, statt Ihnen als Übung überlassen zu werden:

  • Fünf Sprachen ab Werk: Englisch, Deutsch, Französisch, Spanisch und Bulgarisch, für die Hauptseiten und den Blog, mit übersetzten URL-Slugs und einer Sprachauswahl.
  • Helles und dunkles Theme, die standardmäßig der Systemeinstellung des Besuchers folgen (auf Dunkel oder Hell konfigurierbar), mit einem Umschalter, der sich seine Wahl merkt.
  • Website-Suche auf Basis von Pagefind, ein RSS-Feed, eine Sitemap und automatisch erzeugte Open-Graph-Bilder für Blogbeiträge.
  • Optionale Authentifizierung mit Better Auth, aktiviert mit einem einzigen Befehl pnpm auth:enable.
  • Grundlagen für Cookie-Einwilligung und Rechtstexte, die Sie für Ihre eigenen Datenflüsse konfigurieren. Sie sind ein Ausgangspunkt, keine Rechtsberatung.

Funktionen werden über Flags gesteuert, und der Befehl pnpm prune:features entfernt ganze Funktionsfamilien, die Sie nicht benötigen – mit einem Probelaufmodus, der den Plan anzeigt, bevor sich irgendetwas ändert.

Upgrade

Nexus 2.0 ist eine umfangreiche Neustrukturierung. Betrachten Sie das Upgrade daher als Migration und nicht als einfaches Update. Der zuverlässigste Weg ist, mit einer frischen Kopie des Templates zu beginnen, eine Welt auszuwählen und Ihre Inhalte und Konfiguration zu übertragen. Die Content Collections zeigen Ihnen sofort an, wenn ein Frontmatter nicht mehr zum Schema passt.

Was kommt als Nächstes

Als Nächstes bauen wir die Komponentenbibliothek und die Welt-Presets weiter aus und verbessern die Dokumentation dazu, wie Sie jedes Rezept an Ihre eigenen Projekte anpassen.

Diesen Artikel teilen
astro performance