Headless WordPress CMS mit Next.js, ACF & Wiederverwendbarer Komponentenarchitektur
Ein Unternehmen benötigte eine leistungsstarke, SEO-optimierte Marketing-Website mit der Inhaltsbearbeitungsflexibilität von WordPress, aber der Geschwindigkeit und dem Entwicklererlebnis eines modernen React-Frontends – ohne die Einschränkungen traditioneller WordPress-Themes.
Ihr Projekt besprechen
Die Herausforderung
Traditionelle WordPress-Websites hatten Schwierigkeiten, moderne Web-Performance- und SEO-Standards zu erfĂĽllen:
- Monolithische WordPress-Themes waren langsam, schwerfällig und wartungsintensiv
- Redakteure waren an starre Seitenlayouts ohne Flexibilität auf Komponentenebene gebunden
- Serverseitig gerenderte PHP-Seiten erzielten schlechte Ergebnisse bei den Core Web Vitals (LCP, CLS, FID)
- SEO erforderte eine manuelle Verwaltung der Meta-Tags ohne automatisierte strukturierte Daten
- Die Wiederverwendung von UI-Mustern ĂĽber Seiten hinweg erforderte die Duplizierung von Template-Code, was zu Abweichungen und Inkonsistenzen fĂĽhrte
- Die WordPress REST API allein verfügte nicht über die Flexibilität, komplexe, verschachtelte Inhaltsstrukturen zu modellieren
Unsere Lösung
Wir haben eine Headless WordPress + Next.js-Architektur entwickelt, die Advanced Custom Fields (ACF) als flexible Schicht zur Inhaltsmodellierung, ein wiederverwendbares Komponentensystem im Frontend und eine durchgehende automatisierte SEO-Optimierung nutzt.
Architektur
- CMS: WordPress (headless) mit ACF Pro fĂĽr strukturierte Inhaltsmodellierung
- API-Schicht: WPGraphQL + WPGraphQL for ACF, um typisierte Inhalte via GraphQL bereitzustellen
- Frontend: Next.js mit App Router, React Server Components, TypeScript
- Styling: Tailwind CSS fĂĽr Utility-First, Design-System-konformes Styling
- SEO: Next.js Metadata API, JSON-LD strukturierte Daten, automatisierte Sitemap-Generierung
- Hosting: Vercel (Frontend) + verwaltetes WordPress-Hosting (CMS)
- Medien: Next.js Bildoptimierung mit WordPress-Medienbibliothek als Quelle
Inhaltsmodellierung mit ACF
Flexible Inhaltsfelder
ACF Flexible Content-Felder ermöglichen es Redakteuren, Seiten aus vordefinierten Inhaltsblöcken zusammenzustellen. Jeder Block wird direkt einer React-Komponente im Frontend zugeordnet und deckt gängige Muster wie Hero-Sektionen, Feature-Grids, Testimonial-Karussells, CTAs, FAQ-Akkordeons, Statistikzähler, Bild-Text-Layouts, Video-Einbettungen, Preistabellen und Blog-Feeds ab.
Repeater- & Gruppenfelder
- Repeater-Felder für Listen (Teammitglieder, Portfolio-Elemente, Zeitleisteneinträge)
- Gruppenfelder für strukturierte verschachtelte Daten (Adressblöcke, soziale Links, SEO-Überschreibungen)
- Beziehungsfelder zum Verknüpfen von Beiträgen, Seiten und benutzerdefinierten Beitragstypen
- Optionsseiten fĂĽr globale Einstellungen (Header, Footer, soziale Links, Markenfarben)
Wiederverwendbare Komponentenarchitektur
Komponenten-Designprinzipien
Das Frontend folgt einer modularen Architektur mit verschiedenen Schichten:
- Block-Komponenten – Eine React-Komponente pro ACF Flexible Content-Block
- Primitive UI-Komponenten – Wiederverwendbare Elemente wie Buttons, Cards und Badges
- Layout-Komponenten – Header, Footer, Navigation und Container-Wrapper
- SEO-Komponenten – Schema-Generatoren und Meta-Tag-Dienstprogramme
Block-Resolver-Muster
Ein zentraler Resolver ordnet ACF-Blocktypen React-Komponenten zu, wodurch Redakteure Seiten ohne Entwicklerbeteiligung zusammenstellen können:
- Der WordPress-Editor wählt Blöcke aus einem Dropdown-Menü und füllt Felder aus
- WPGraphQL stellt die Seite als strukturiertes JSON mit Blocktypen und Felddaten bereit
- Next.js ruft die Seitendaten zur Build-Zeit (ISR) oder zur Anfragezeit (SSR) ab
- Der Block-Resolver iteriert durch das Blöcke-Array und rendert die passende React-Komponente
- Jede Komponente empfängt ihre ACF-Felddaten als typisierte Props
SEO-Optimierung
Technisches SEO
- Dynamische Meta-Tags – Title-, Description-, Open Graph- und Twitter Card-Tags, die pro Seite aus CMS-Daten generiert werden
- Canonical URLs – Automatisierte Canonical-Tag-Generierung zur Vermeidung von Duplicate Content
- Sitemap-Generierung – Dynamische XML-Sitemap, die zur Build-Zeit aus WordPress Seiten-/Beitragsdaten erstellt wird
- robots.txt – Programmatische Generierung mit umgebungsabhängigen Regeln
- Strukturierte Daten – JSON-LD-Schema für die Typen Organization, Article, FAQ, BreadcrumbList und Product
Performance-SEO (Core Web Vitals)
- Statische Generierung (ISR) – Seiten, die bei Inhaltsänderung via Webhook vorgerendert und revalidiert werden
- Bildoptimierung – Automatische WebP/AVIF-Konvertierung, Lazy Loading, responsives srcset
- Schriftoptimierung – Benutzerdefiniertes Laden von Schriftarten ohne Layout-Verschiebung
- Code-Splitting – Automatisches Code-Splitting pro Route mit React Server Components
- Edge Caching – Globales Edge-Netzwerk für TTFB unter 100ms
Inhalts-SEO
- Seitenweise SEO-Felder – Meta-Title, Description und OG-Bild-Überschreibung via benutzerdefinierte Felder
- Breadcrumbs – Automatisch generierte Breadcrumb-Navigation mit Schema-Markup
- Interne Verlinkung – Beziehungsfelder ermöglichen strukturierte Vorschläge für interne Links
- Erzwingung von Alt-Texten – Erforderlicher Alt-Text auf allen Bildfeldern
WordPress-zu-Next.js Datenfluss
- Inhaltsänderung – Redakteur veröffentlicht oder aktualisiert Inhalte im WordPress-Adminbereich
- Webhook-Auslöser – WordPress sendet einen Webhook an den Next.js-Revalidierungs-Endpunkt
- ISR-Revalidierung – Next.js generiert nur die betroffenen Seiten neu
- CDN-Invalidierung – Aktualisierte Seiten werden innerhalb von Sekunden nach der Veröffentlichung vom Edge-Server bereitgestellt
Hauptmerkmale
- Visueller Seiten-Builder – Redakteure erstellen Seiten aus ACF-Blöcken, ohne Code zu berühren
- Typisierte Content-API – WPGraphQL + ACF bieten ein vollständig typisiertes GraphQL-Schema
- Komponentenbibliothek – Über 10 wiederverwendbare Blöcke, die alle gängigen Marketingseiten-Muster abdecken
- ISR + Webhooks – Inhaltsaktualisierungen werden innerhalb von Sekunden auf der Live-Seite angezeigt
- SEO-Automatisierung – Strukturierte Daten, Sitemaps und Meta-Tags, die aus CMS-Daten generiert werden
- Core Web Vitals – Optimierte Bilder, Schriftarten und Code-Splitting für höchste Lighthouse-Scores
- Vorschau-Modus – WordPress-Vorschau-Button zeigt Entwurfsinhalte im Next.js-Frontend an
- Mehrsprachigkeitsfähig – ACF + WPML/Polylang-Integration für internationalisierte Inhalte
Ergebnisse
Technologie-Stack
caseStudyDetail.more Fallstudien
Entdecken Sie mehr unserer technischen Implementierungen
Strapi CMS + Next.js Website mit fortgeschrittener SEO-Architektur
Ein wachsendes Unternehmen benötigte eine schnelle, inhaltsreiche Marketing-Website, auf der das nicht-technische Marketingteam Seiten, Blogbeiträge und Landing Pages selbstständig verwalten konnte – und gleichzeitig sichergestellt war, dass die Website vom ersten Tag an im organischen Suchranking wettbewerbsfähig war.
Kickly: KI-gestĂĽtzte Projektplattform fĂĽr Startups
Kickly ist eine KI-gestützte Projektmanagementplattform, die für Startups entwickelt wurde – und intelligente Aufgabenautomatisierung, Teamkollaboration und Echtzeit-Fortschrittsverfolgung in einem Produkt vereint.
Bereit, Ihr Unternehmen zu transformieren?
Lassen Sie uns besprechen, wie wir ähnliche Lösungen für Ihre Herausforderungen anwenden können.