Headless WordPress CMS med Next.js, ACF & genanvendelig komponentarkitektur
En virksomhed havde brug for et højtydende, SEO-optimeret marketingwebsite med WordPress' fleksibilitet inden for indholdsredigering, men med hastigheden og udvikleroplevelsen fra en moderne React frontend — uden begrænsningerne fra traditionelle WordPress-temaer.
Diskuter Dit Projekt
Udfordringen
Traditionelle WordPress-sider havde svært ved at opfylde moderne standarder for webperformance og SEO:
- Monolitiske WordPress-temaer var langsomme, tunge og svære at vedligeholde
- Indholdsredaktører var låst fast i stive sidelayouts uden fleksibilitet på komponentniveau
- Server-renderede PHP-sider scorede dårligt på Core Web Vitals (LCP, CLS, FID)
- SEO krævede manuel meta tag-styring uden automatiseret struktureret data
- Genbrug af UI-mønstre på tværs af sider krævede duplikering af skabelonkode, hvilket førte til afvigelse og inkonsistens
- WordPress REST API alene manglede fleksibiliteten til at modellere komplekse, indlejrede indholdsstrukturer
Vores Løsning
Vi byggede en headless WordPress + Next.js-arkitektur ved at bruge Advanced Custom Fields (ACF) som et fleksibelt indholdsmodelleringslag, et genanvendeligt komponentsystem på frontend, og automatiseret SEO-optimering gennemgående.
Arkitektur
- CMS: WordPress (headless) med ACF Pro til struktureret indholdsmodellering
- API-lag: WPGraphQL + WPGraphQL for ACF til at eksponere typet indhold via GraphQL
- Frontend: Next.js med App Router, React Server Components, TypeScript
- Styling: Tailwind CSS til utility-first, designsystem-justeret styling
- SEO: Next.js Metadata API, JSON-LD struktureret data, automatiseret sitemap-generering
- Hosting: Vercel (frontend) + managed WordPress-hosting (CMS)
- Medier: Next.js Image optimization med WordPress mediebibliotek som kilde
Indholdsmodellering med ACF
Fleksible indholdsfelter
ACF Flexible Content-felter gør det muligt for redaktører at sammensætte sider ud fra foruddefinerede indholdsblokke. Hver blok mapper direkte til en React-komponent på frontend, der dækker almindelige mønstre som hero-sektioner, feature grids, testimonial-karruseller, CTAs, FAQ-harmonikaer, stats-tællere, billed-tekst-layouts, video-embeds, prisoversigter og blog-feeds.
Repeater- & Group-felter
- Repeater-felter til lister (teammedlemmer, portfolio-elementer, tidslinjepunkter)
- Group-felter til strukturerede indlejrede data (adresseblokke, sociale links, SEO-tilsidesættelser)
- Relationship-felter til at linke indlæg, sider og custom post types
- Options-sider til globale indstillinger (header, footer, sociale links, brandfarver)
Genanvendelig komponentarkitektur
Komponentdesignprincipper
Frontend følger en modulær arkitektur med forskellige lag:
- Blokkomponenter — Én React-komponent pr. ACF Flexible Content-blok
- Primitive UI-komponenter — Genanvendelige elementer som knapper, kort og badges
- Layout-komponenter — Header, footer, navigation og container-wrappers
- SEO-komponenter — Skemageneratorer og meta tag-værktøjer
Blok-resolver-mønster
En central resolver mapper ACF-bloktyper til React-komponenter, hvilket gør det muligt for redaktører at sammensætte sider uden udviklerinvolvering:
- WordPress-redaktør vælger blokke fra en dropdown og udfylder felter
- WPGraphQL eksponerer siden som struktureret JSON med bloktyper og feltdata
- Next.js henter sidedata ved build time (ISR) eller request time (SSR)
- Blok-resolveren itererer gennem blok-array'et og renderiserer den matchende React-komponent
- Hver komponent modtager sine ACF-feltdata som typede props
SEO-optimering
Teknisk SEO
- Dynamiske meta tags — Titel, beskrivelse, Open Graph og Twitter Card tags genereret pr. side fra CMS-data
- Canonical URL'er — Automatisk generering af canonical tags, der forhindrer duplikeret indhold
- Sitemap-generering — Dynamisk XML-sitemap bygget ud fra WordPress side-/postdata ved build time
- robots.txt — Programmatisk generering med miljøbevidste regler
- Strukturerede data — JSON-LD-skema for Organisation, Artikel, FAQ, BreadcrumbList og Produkttyper
Performance SEO (Core Web Vitals)
- Statisk Generering (ISR) — Sider forhåndsrenderet og revalideret ved indholdsændring via webhook
- Billedoptimering — Automatisk WebP/AVIF-konvertering, lazy loading, responsiv srcset
- Skrifttypeoptimering — Zero-layout-shift custom font-loading
- Code Splitting — Automatisk per-route code splitting med React Server Components
- Edge Caching — Globalt edge-netværk for sub-100ms TTFB
Indholds-SEO
- Side-specifikke SEO-felter — Meta titel, beskrivelse og OG billede tilsidesættelse via brugerdefinerede felter
- Brødkrummer — Automatisk genereret brødkrummenavigation med skema-markup
- Intern linkbuilding — Relationship-felter muliggør strukturerede interne linksuggestioner
- Alt-tekst-håndhævelse — Krævet alt-tekst på alle billedfelter
WordPress-til-Next.js dataflow
- Indholdsændring — Redaktør publicerer eller opdaterer indhold i WordPress admin
- Webhook-trigger — WordPress sender et webhook til Next.js revaliderings-endpoint
- ISR-revalidering — Next.js regenererer kun de berørte sider
- CDN-invalidations — Opdaterede sider serveres fra edge inden for sekunder efter publicering
Nøglefunktioner
- Visuel sidebygger — Redaktører sammensætter sider fra ACF-blokke uden at røre kode
- Typet Content API — WPGraphQL + ACF leverer et fuldt typet GraphQL-skema
- Komponentbibliotek — 10+ genanvendelige blokke, der dækker alle almindelige marketing-sidemønstre
- ISR + Webhooks — Indholdsopdateringer afspejles på live-siden inden for sekunder
- SEO-automatisering — Strukturerede data, sitemaps og meta tags genereret fra CMS-data
- Core Web Vitals — Optimerede billeder, skrifttyper og code splitting for top Lighthouse-scores
- Preview Mode — WordPress preview-knap viser udkastindhold i Next.js frontend
- Klar til flere sprog — ACF + WPML/Polylang-integration til internationaliseret indhold
Resultater
Teknologistak
caseStudyDetail.more Casestudier
Udforsk flere af vores tekniske implementeringer
Strapi CMS + Next.js Hjemmeside med Avanceret SEO-arkitektur
En voksende virksomhed havde brug for en hurtig, indholdsrig marketinghjemmeside, hvor deres ikke-tekniske marketingteam selvstændigt kunne administrere sider, blogindlæg og landingssider – samtidig med at de sikrede, at siden rangerede konkurrencedygtigt i organisk søgning fra dag ét.
Kickly: AI-drevet projektplatform for startups
Kickly er en AI-drevet projektstyringsplatform bygget til startups – der kombinerer smart opgaveautomatisering, teamsamarbejde og sporing af fremskridt i realtid i ét produkt.
Klar til at Transformere Din Virksomhed?
Lad os drøfte, hvordan vi kan anvende lignende løsninger til dine udfordringer.