Headless WordPress CMS Next.js:llä, ACF:llä ja uudelleenkäytettävällä komponenttiarkkitehtuurilla
Liiketoiminta tarvitsi korkean suorituskyvyn, SEO-optimoidun markkinointiverkkosivuston, jossa yhdistyisi WordPressin sisällönhallinnan joustavuus ja modernin React-frontendin nopeus sekä kehittäjäkokemus – ilman perinteisten WordPress-teemojen rajoituksia.
Keskustele Projektistasi
Haaste
Perinteiset WordPress-sivustot kamppailivat täyttääkseen nykyaikaiset verkkosuorituskyvyn ja SEO-standardit:
- Monoliittiset WordPress-teemat olivat hitaita, raskaita ja vaikeasti ylläpidettäviä
- Sisällöntuottajat olivat sidottuja jäykkiin sivuasetteluihin ilman komponenttitason joustavuutta
- Palvelinpuolella renderöidyt PHP-sivut saivat huonot pisteet Core Web Vitals -mittareissa (LCP, CLS, FID)
- SEO vaati manuaalista meta-tagien hallintaa ilman automaattista strukturoitua dataa
- Käyttöliittymäkuvioiden uudelleenkäyttö sivuilla vaati mallikoodin monistamista, mikä johti eroja ja epäjohdonmukaisuutta
- Pelkältä WordPress REST API:lta puuttui joustavuus mallintaa monimutkaisia, sisäkkäisiä sisältörakenteita
Meidän Ratkaisumme
Rakensimme headless WordPress + Next.js -arkkitehtuurin käyttäen Advanced Custom Fields (ACF) -lisäosaa joustavana sisällön mallinnuskerroksena, uudelleenkäytettävää komponenttijärjestelmää frontendissä ja automaattista SEO-optimointia läpi koko prosessin.
Arkkitehtuuri
- CMS: WordPress (headless) ja ACF Pro strukturoidun sisällön mallinnukseen
- API-kerros: WPGraphQL + WPGraphQL for ACF paljastaa tyypitetyn sisällön GraphQL:n kautta
- Frontend: Next.js App Routerin, React Server Componentsien ja TypeScriptin kanssa
- Tyylitys: Tailwind CSS käytännöllisyyden ja design-järjestelmän mukaiseen tyylittelyyn
- SEO: Next.js Metadata API, JSON-LD -strukturoitu data, automaattinen sivukarttojen generointi
- Hosting: Vercel (frontend) + hallinnoitu WordPress-hosting (CMS)
- Media: Next.js Image -optimointi WordPressin mediakirjastoa lähteenä käyttäen
Sisällön mallinnus ACF:llä
Joustavat sisältökentät
ACF Flexible Content -kentät mahdollistavat sisällöntuottajien koota sivuja ennalta määritetyistä sisältölohkoista. Jokainen lohko vastaa suoraan React-komponenttia frontendissä, kattaen yleisiä kuvioita kuten sankarisektoita, ominaisuustaulukoita, suosittelukaruselleja, CTA:ta, UKK-harmonikkoja, tilastonäyttöjä, kuva-teksti-asetteluja, video upotuksia, hinnastoja ja blogisyötteitä.
Toistuvat ja ryhmäkentät
- Repeater fields listoille (tiimin jäsenet, portfoliokohteet, aikajanan merkinnät)
- Group fields strukturoidulle sisäkkäiselle datalle (osoitelohkot, sosiaalisen median linkit, SEO-ohitukset)
- Relationship fields postausten, sivujen ja mukautettujen postityyppien linkittämiseen
- Options pages globaaleille asetuksille (otsikko, alatunniste, sosiaalisen median linkit, brändin värit)
Uudelleenkäytettävä komponenttiarkkitehtuuri
Komponenttien suunnitteluperiaatteet
Frontend noudattaa modulaarista arkkitehtuuria, jossa on erilliset kerrokset:
- Lohkokomponentit — Yksi React-komponentti per ACF Flexible Content -lohko
- Alkeelliset käyttöliittymäkomponentit — Uudelleenkäytettävät elementit kuten painikkeet, kortit ja merkit
- Asettelukomponentit — Otsikko, alatunniste, navigointi ja säiliökääreet
- SEO-komponentit — Schema-generaattorit ja meta-tagi-apuohjelmat
Lohkonratkaisijan malli
Keskitetty ratkaisija yhdistää ACF-lohkotyypit React-komponentteihin, mahdollistaen sisällöntuottajien koostaa sivuja ilman kehittäjän osallistumista:
- WordPress-editori valitsee lohkoja pudotusvalikosta ja täyttää kentät
- WPGraphQL paljastaa sivun strukturoituna JSON-datana lohkotyyppien ja kenttätietojen kanssa
- Next.js hakee sivudatan käännösaikana (ISR) tai pyyntöhetkellä (SSR)
- Lohkonratkaisija käy läpi lohkotaulukon ja renderöi vastaavan React-komponentin
- Jokainen komponentti vastaanottaa ACF-kenttätietonsa tyypitettyinä propeina
SEO-optimointi
Tekninen SEO
- Dynaamiset meta-tagit — Otsikko, kuvaus, Open Graph ja Twitter Card -tagit luodaan jokaiselle sivulle CMS-datasta
- Kanoniset URL-osoitteet — Automaattinen kanonisten tagien luonti estää sisällön kopioitumisen
- Sivukartan luonti — Dynaaminen XML-sivukartta rakennetaan WordPress-sivu/postausdatasta käännösaikana
- robots.txt — Ohjelmallinen luonti ympäristötietoisilla säännöillä
- Strukturoitu data — JSON-LD-skeema organisaatio-, artikkeli-, UKK-, polkumerkintä- ja tuotetyypeille
Suorituskyky SEO (Core Web Vitals)
- Staattinen generointi (ISR) — Sivut esirenderöidään ja validoidaan uudelleen sisällön muuttuessa webhookin kautta
- Kuvan optimointi — Automaattinen WebP/AVIF-muunnos, laiska lataus, responsiivinen srcset
- Fontin optimointi — Nolla asettelun siirtymän mukautetun fontin lataus
- Koodin jakaminen — Automaattinen reittikohtainen koodin jakaminen React Server Componentsien avulla
- Edge-välimuistitus — Globaali edge-verkko alle 100 ms TTFB:lle
Sisältö SEO
- Sivukohtaiset SEO-kentät — Meta-otsikko, kuvaus ja OG-kuvan ohitus mukautettujen kenttien kautta
- Polkumerkinnät — Automaattisesti luotu polkumerkintänavigointi schema-merkinnällä
- Sisäinen linkitys — Relationship fields mahdollistavat strukturoidut sisäisen linkin ehdotukset
- Alt-tekstin vaatimus — Vaadittu alt-teksti kaikissa kuvakentissä
WordPress-Next.js-tiedonkulku
- Sisällön muutos — Editori julkaisee tai päivittää sisältöä WordPress-hallinnassa
- Webhook-käynnistin — WordPress lähettää webhookin Next.js:n uudelleenvalidoinnin päätepisteeseen
- ISR-uudelleenvalidointi — Next.js generoi uudelleen vain kyseiset sivut
- CDN-mitätöinti — Päivitetyt sivut tarjoillaan edge-verkosta sekunneissa julkaisusta
Tärkeimmät ominaisuudet
- Visuaalinen sivunrakentaja — Editorit koostavat sivuja ACF-lohkoista koskematta koodiin
- Tyypitetty sisältö API — WPGraphQL + ACF tarjoaa täysin tyypitetyn GraphQL-skeeman
- Komponenttikirjasto — Yli 10 uudelleenkäytettävää lohkoa kattaa kaikki yleiset markkinointisivujen kuviot
- ISR + Webhooks — Sisältöpäivitykset näkyvät live-sivustolla sekunneissa
- SEO-automaatio — Strukturoitu data, sivukartat ja meta-tagit luodaan CMS-datasta
- Core Web Vitals — Optimoidut kuvat, fontit ja koodin jakaminen parhaiden Lighthouse-pisteiden saavuttamiseksi
- Esikatselutila — WordPressin esikatselupainike näyttää luonnosvedoksen sisällön Next.js-frontendissä
- Monikielivalmius — ACF + WPML/Polylang-integraatio kansainväliselle sisällölle
Tulokset
Teknologiapino
caseStudyDetail.more Tapaustutkimukset
Tutustu lisää teknisiin toteutuksiimme
Strapi CMS + Next.js Verkkosivusto Edistyneellä SEO-arkkitehtuurilla
Kasvava yritys tarvitsi nopean, sisältörikkaan markkinointiverkkosivuston, jossa sen ei-tekninen markkinointitiimi voisi hallita sivuja, blogikirjoituksia ja laskeutumissivuja itsenäisesti – varmistaen samalla, että sivusto sijoittui kilpailukykyisesti orgaanisessa haussa heti alusta alkaen.
AI-pohjainen laskujen käsittely OCR:n ja QuickBooks-integraation avulla
Keskisuuri yritys, joka käsitteli satoja toimittajalaskuja kuukausittain, halusi poistaa manuaalisen tiedonsyötön poimimalla laskutiedot automaattisesti AI/OCR:n avulla ja synkronoimalla ne suoraan QuickBooks-järjestelmään kirjanpitoa ja maksujen seurantaa varten.
Valmis Muuttamaan Liiketoimintaasi?
Keskustellaan siitä, miten voimme soveltaa vastaavia ratkaisuja haasteisiisi.