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.
AI-drevet fakturabehandling med OCR og QuickBooks-integration
En mellemstor virksomhed, der månedligt behandler hundredvis af leverandørfakturaer, havde brug for at eliminere manuel dataindtastning ved automatisk at udtrække fakturadata ved hjælp af AI/OCR og synkronisere dem direkte til QuickBooks for bogføring og sporing af betalinger.
Klar til at Transformere Din Virksomhed?
Lad os drøfte, hvordan vi kan anvende lignende løsninger til dine udfordringer.