Wie diese Website entstand: Next.js, Directus & Page Builder

Update, Juli 2026: Diese Website läuft inzwischen nicht mehr auf dem hier beschriebenen Stack. Warum ich Next.js und Directus nach einem halben Jahr wieder verabschiedet habe, steht im Nachfolge-Beitrag: Astro Framework statt CMS: Der Relaunch von syfrt.de. Der folgende Text bleibt als Zeitdokument unverändert.

Warum eine neue Website?

Nach Jahren der Nutzung verschiedener CMS-Systeme und Frameworks war es Zeit für einen kompletten Neustart. Mein Ziel: eine moderne, wartbare und performante Website, die gleichzeitig als Referenzprojekt für meine Arbeit dient.

Der Tech-Stack

Ich habe mich für eine moderne Jamstack-Architektur entschieden:

• Next.js 16 als React-Framework mit App Router
• Directus als Headless CMS für die Content-Verwaltung
• Tailwind CSS für das Styling
• TypeScript für Type-Safety

Warum Next.js?

Next.js bietet alles, was eine moderne Web-App braucht: Server-Side Rendering für optimale Performance, Static Site Generation für schnelle Ladezeiten, Image-Optimierung out of the box und API-Routes für Features wie Draft Mode und Revalidierung.

Warum Directus?

Directus ist ein Open-Source Headless CMS, das sich gut für moderne Web-Projekte eignet: vollständig API-basiert (REST + GraphQL), flexible Datenmodellierung mit Relationen, moderne Admin-UI und selbst hostbar auf dem eigenen Server.

Das Highlight: der Page Builder

Das spannendste Feature war der flexible Page Builder, umgesetzt mit Directus’ M2A-Relationen (Many-to-Any). Statt starrer Templates wollte ich ein modulares System, bei dem sich Seiten aus wiederverwendbaren Content-Blöcken zusammensetzen:

• Hero-Blöcke für auffällige Header-Bereiche
• Text+Bild-Sektionen mit flexiblem Layout
• Feature-Grids mit Icons
• Call-to-Action-Blöcke für Conversions

Die technische Umsetzung

In Directus bekam jeder Block-Typ eine eigene Collection. Eine Junction-Collection page_blocks verknüpft die Blöcke mit den Seiten – durch die M2A-Relation kann eine Seite Blöcke verschiedener Typen mischen. In Next.js rendert eine zentrale BlockRenderer-Komponente die Blöcke dynamisch nach ihrem Typ:

export function BlockRenderer({ blocks }) {
  return blocks.map((block) => {
    const Component = getBlockComponent(block.collection);
    return <Component key={block.id} data={block.item} />;
  });
}

Features

• Draft Mode: Inhalte in Directus bearbeiten und sofort auf der Website prüfen, ohne zu veröffentlichen.
• On-Demand Revalidation: Content-Änderungen triggern per Webhook die Neu-Generierung der betroffenen Seite – statische Vorteile bleiben erhalten, Updates sind sofort sichtbar.
• Dark Mode: automatisch nach System-Einstellung, umgesetzt mit CSS Custom Properties und prefers-color-scheme.

Deployment

Die Website lief auf einem eigenen Server mit PM2 für den Node.js-Prozess, rsync für das Deployment der Build-Artefakte und automatischer Revalidierung bei Content-Änderungen.

Fazit

Die Website zeigte, was mit modernen Web-Technologien möglich ist: schnell, flexibel, wartbar und individuell. Der modulare Ansatz machte es einfach, neue Inhalte zu erstellen und die Seite weiterzuentwickeln. Wie es weiterging – und warum am Ende weniger Stack mehr Website war – steht im Nachfolge-Beitrag.