Headless WordPress CMS med Next.js, ACF & genanvendelig komponentarkitektur
En virksomhed havde brug for en højtydende, SEO-optimeret marketinghjemmeside med WordPress' fleksibilitet inden for indholdsredigering, men med hastigheden og udvikleroplevelsen fra et moderne React frontend — uden begrænsningerne ved 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 til stive sidelayouts uden fleksibilitet på komponentniveau
- Server-renderede PHP-sider scorede dårligt på Core Web Vitals (LCP, CLS, FID)
- SEO krævede manuel administration af meta-tags uden automatiserede strukturerede 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 gennem hele processen.
Arkitektur
- CMS: WordPress (headless) med ACF Pro til struktureret indholdsmodellering
- API-lag: WPGraphQL + WPGraphQL for ACF til at eksponere typificeret 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 strukturerede data, automatiseret generering af sitemap
- Hosting: Vercel (frontend) + managed WordPress hosting (CMS)
- Medie: Next.js Image optimization med WordPress mediebibliotek som kilde
Indholdsmodellering med ACF
Fleksible indholdsfelt
ACF Flexible Content-felter giver redaktører mulighed for at opbygge sider ud fra foruddefinerede indholdsblokke. Hver blok mapper direkte til en React-komponent på frontend og dækker almindelige mønstre som herosektioner, feature-grids, testimonial-karruseller, CTA'er, FAQ-harmonikaer, statistik-tællere, billed-tekst-layouts, video-indbædninger, prissætningstabeller og blog-feeds.
Repeater- & Gruppe-felter
- Repeater-felter til lister (teammedlemmer, porteføljeelementer, tidslinjeposter)
- Gruppe-felter til strukturerede indlejrede data (adresseblokke, sociale links, SEO-tilsidesættelser)
- Relation-felter til at linke indlæg, sider og brugerdefinerede post-typer
- Options-sider til globale indstillinger (header, footer, sociale links, brandfarver)
Genanvendelig komponentarkitektur
Principper for komponentdesign
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 udviklerindblanding:
- WordPress-redaktør vælger blokke fra en dropdown og udfylder felter
- WPGraphQL eksponerer siden som strukturerede JSON med bloktyper og feltdata
- Next.js henter sidedata ved build-tid (ISR) eller anmodningstid (SSR)
- Blok-resolveren itererer gennem blok-arrayet og render matching React-komponent
- Hver komponent modtager sine ACF-feltdata som typificerede props
SEO-optimering
Teknisk SEO
- Dynamiske meta-tags — Titel, beskrivelse, Open Graph og Twitter Card-tags genereres pr. side ud fra CMS-data
- Kanoniske URL'er — Automatiseret generering af kanoniske tags, der forhindrer duplikeret indhold
- Sitemap-generering — Dynamisk XML-sitemap bygget ud fra WordPress side-/postdata ved build-tid
- robots.txt — Programmatisk generering med miljøbevidste regler
- Strukturerede data — JSON-LD-skema for Organization, Article, FAQ, BreadcrumbList og Product-typer
Performance SEO (Core Web Vitals)
- Statisk generering (ISR) — Sider forud-renderes og revalideres ved indholdsændring via webhook
- Billedeoptimering — Automatisk WebP/AVIF-konvertering, lazy loading, responsiv srcset
- Skrifttypeoptimering — Brugerdefineret skrifttypeindlæsning uden layout-skift
- Code Splitting — Automatisk rute-specifik 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ættes via brugerdefinerede felter
- Brødkrummer — Automatisk genereret brødkrumme-navigation med skema-markup
- Intern linking — Relation-felter muliggør strukturerede interne linkforslag
- Håndhævelse af Alt-tekst — På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-invalidering — Opdaterede sider serveres fra edge inden for sekunder efter udgivelse
Nøglefunktioner
- Visuel sidebygger — Redaktører sammensætter sider fra ACF-blokke uden at røre kode
- Typificeret indholds-API — WPGraphQL + ACF leverer fuldt typificeret GraphQL-skema
- Komponentbibliotek — 10+ genanvendelige blokke, der dækker alle almindelige marketing-side-mønstre
- ISR + Webhooks — Indholdsopdateringer afspejles på live-siden inden for sekunder
- SEO-automatisering — Strukturerede data, sitemaps og meta-tags genereres fra CMS-data
- Core Web Vitals — Optimerede billeder, skrifttyper og code splitting for top Lighthouse-scores
- Forhåndsvisningstilstand — WordPress forhåndsvisningsknap viser udkastindhold i Next.js-frontend
- Klar til flere sprog — ACF + WPML/Polylang-integration til internationaliseret indhold
Resultater
Teknologistak
Ofte stillede spørgsmål
MicrocosmWorks målte 3-5 gange hurtigere indlæsningstider for sider efter migrering fra et traditionelt WordPress-tema til en headless Next.js frontend, primært fordi Next.js serverer forudrenderet statisk HTML med inkrementel statisk regenerering i stedet for at generere sider ved hver anmodning via WordPress's PHP runtime. Den headless arkitektur eliminerer også ydelsesmæssig overhead fra WordPress plugins, der injicerer frontend JavaScript og CSS, da Next.js frontend kun indlæser den kode, den faktisk har brug for.
MicrocosmWorks configured ACF field groups to expose their data through the WordPress REST API and WPGraphQL, allowing the Next.js frontend to query structured content like hero sections, feature grids, testimonials, and custom layouts using typed GraphQL queries. This gives content editors the same familiar ACF editing experience in the WordPress admin while the frontend renders those fields through purpose-built React components that are faster and more visually consistent than traditional ACF template rendering.
MicrocosmWorks built a library of 25+ reusable React components that map directly to ACF Flexible Content layouts, so content editors can assemble new pages by selecting and ordering pre-built sections like hero banners, feature grids, pricing tables, and CTA blocks without developer involvement. Once the initial component library is built, new landing pages can be created and published in minutes through the WordPress admin, eliminating the design-to-development cycle for routine content updates.
MicrocosmWorks implemented a preview mode that connects WordPress's built-in preview button to a draft-rendering endpoint in the Next.js application, showing editors exactly how their unpublished changes will appear on the live site. The preview system bypasses the static cache and fetches draft content directly from the WordPress API in real-time, and supports ACF field previews so editors see the actual component rendering rather than a generic text preview.
MicrocosmWorks performs headless WordPress migrations at development rates of $15-$35/hr, with a typical migration including ACF content modeling, component library development, and Next.js frontend build taking 2-4 months depending on the number of unique page templates and custom functionality. The ongoing hosting cost is often lower than traditional WordPress hosting because the Next.js frontend can be deployed on Vercel's free or low-cost tiers while WordPress runs as a lightweight headless CMS without frontend traffic load.
Klar til at Transformere Din Virksomhed?
Lad os drøfte, hvordan vi kan anvende lignende løsninger til dine udfordringer.