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 mir alles, was ich für eine moderne Web-App brauche:

Server-Side Rendering (SSR) für optimale Performance
Static Site Generation (SSG) für schnelle Ladezeiten
Image-Optimierung out-of-the-box
API Routes für Funktionen wie Draft Mode und Revalidierung

Warum Directus?

Directus ist ein Open-Source Headless CMS, das sich perfekt für moderne Web-Projekte eignet:

Vollständig API-basiert (REST + GraphQL)
Flexible Data-Modellierung mit Relations
Moderne Admin-UI
Selbst-hostbar auf eigenem Server

Das Highlight: Der Page Builder

Das spannendste Feature ist der flexible Page Builder, den ich mit Directus' M2A-Relations (Many-to-Any) umgesetzt habe.

Die Idee

Statt starrer Templates wollte ich ein modulares System, bei dem ich Seiten aus wiederverwendbaren Content-Blöcken zusammensetzen kann:

Hero Blocks für auffallende Header-Bereiche
Text+Bild Sections mit flexiblem Layout
Feature Grids mit Icons
Call-to-Action Blocks für Conversions

Die technische Umsetzung

In Directus habe ich für jeden Block-Typ eine eigene Collection erstellt. Eine Junction-Collection page_blocks verknüpft dann die Blöcke mit den Seiten. Das Besondere: Durch die M2A-Relation kann eine Seite Blöcke verschiedener Typen verwenden.

In Next.js rendert eine zentrale BlockRenderer-Komponente die Blöcke dynamisch basierend auf 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

Mit Next.js Draft Mode kann ich Inhalte in Directus bearbeiten und sie sofort auf der Website prüfen, ohne sie zu veröffentlichen.

On-Demand Revalidation

Wenn ich Content in Directus ändere, wird automatisch ein Webhook getriggert, der Next.js mitteilt, die entsprechende Seite neu zu generieren. So bleiben statische Vorteile erhalten, während Content-Updates sofort sichtbar sind.

Light/Dark Mode

Die Website unterstützt automatisch den Dark Mode basierend auf den System-Einstellungen des Browsers. Umgesetzt mit CSS Custom Properties und prefers-color-scheme Media Queries.

Deployment

Die Website läuft auf einem eigenen Server mit:

PM2 für den Node.js-Prozess
Rsync für das Deployment der Build-Artefakte
Automatisches Revalidation bei Content-Änderungen

Fazit

Die neue Website zeigt, was mit modernen Web-Technologien möglich ist: Schnell, flexibel, wartbar und individuell. Der modulare Ansatz macht es einfach, neue Inhalte zu erstellen und die Seite kontinuierlich weiterzuentwickeln.

Wenn Sie Interesse an einem ähnlichen Projekt haben oder Fragen zur technischen Umsetzung haben, sprechen Sie mich gerne an!

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