Hvordan bruger man WordPress med Next.js til en headless hjemmeside?

Moderne hjemmesider kræver hastighed, fleksibilitet og bundsolid SEO. En headless WordPress med Next.js leverer alle tre. Ved at adskille dit content management system fra din frontend, får du det bedste fra begge verdener: WordPress' velkendte redigeringsoplevelse og Next.js' lynhurtige renderingsfunktioner.

Denne guide gennemgår alt, lige fra at forstå arkitekturen til at implementere et produktionsklart headless website.

Uanset om du er en udvikler, der udforsker afkoblede CMS-opsætninger, eller et team, der ønsker at modernisere et ældre WordPress-websted, har denne trinvise ressource dig dækket.

TL;DR: Byg en hurtig og skalerbar headless hjemmeside

• Brug en afkoblet opsætning til at adskille indholdsstyring fra frontend for bedre fleksibilitet.
• Hent indhold via REST API eller GraphQL for effektiv datalevering.
• Forbedr ydeevnen med generering af statisk elektricitet, serverrendering og smart caching.
• Implementer på moderne hostingplatforme og sikre API'er for hastighed, skalerbarhed og beskyttelse.

Hvad er Headless WordPress, og hvorfor kombinere det med Next.js?

For at forstå styrken ved denne stak, skal du først forstå konceptet med en "headless" arkitektur, og hvorfor disse to specifikke teknologier udgør et så perfekt par.

Definition af headless WordPress CMS-arkitektur

Traditionelt WordPress er et monolitisk system. Det håndterer indholdslagring, forretningslogik og sidegengivelse på ét sted. Når en besøgende lander på dit websted, forespørger WordPress databasen, behandler PHP-skabeloner og leverer en fuldt gengivet HTML-side.

Headless WordPress opdeler den model i to dele. I en headless arkitektur:

• WordPress fungerer udelukkende som backend. Det administrerer indhold, brugergodkendelse og datalagring.

• Frontend'en er helt separat. Et JavaScript-framework som Next.js håndterer al rendering og brugerinteraktion.

• En API bygger bro mellem de to. WordPress eksponerer indhold via sin REST API eller GraphQL-slutpunkt, og Next.js henter disse data for at bygge sider.

Udtrykket "headless" kommer fra fjernelsen af ​​"head", frontend-præsentationslaget, fra WordPress.

Din WordPress-installation eksisterer stadig, redaktører logger stadig ind på /wp-admin, og indlæg oprettes stadig på samme måde. Men besøgende interagerer aldrig direkte med WordPress. De interagerer med din Next.js-frontend.

Fordele ved at afkoble backend fra frontend

At afkoble din WordPress-backend fra din frontend-arkitektur giver flere enorme fordele:

• Ydelsesforbedringer: Next.js forudgiver sider som statisk HTML under byggetidspunktet. Der er ingen PHP-behandling på hver anmodning, hvilket reducerer Time to First Byte (TTFB) dramatisk.

• Frontend-frihed: Du kan genopbygge eller redesigne din frontend uden at røre WordPress. Skift frameworks, redesign layouts eller kør A/B-tests uden CMS-migreringer.

• Forbedret sikkerhed: Din WordPress-instans kan køre på en privat server eller et underdomæne, skjult fra det offentlige internet. Angribere kan ikke målrette wp-login.php, hvis de ikke kan finde den.

• Skalerbarhed: Statiske sider, der serveres fra et CDN, håndterer trafikstigninger uden problemer. Din WordPress-server modtager kun API-anmodninger, ikke sideindlæsninger.

• Levering af indhold via flere kanaler: Den samme WordPress-indholds-API kan betjene et websted, en mobilapp, en stemmeassistent og en kiosk samtidigt.

• Bedre udvikleroplevelse: Frontend-teams arbejder i React- og JavaScript-værktøjer, de allerede kender, uden at lære PHP- eller WordPress-temaudvikling.

Hvorfor Next.js er ideel til Headless WordPress-ydeevne og SEO?

Next.js skiller sig ud blandt JavaScript-frameworks til headless CMS-projekter af flere årsager.

• Server-Side Rendering (SSR) og Static Site Generation (SSG) giver dig kontrol over, hvornår og hvordan sider gengives. Du kan generere din blog statisk under opbygning, server-rendere produktsider, der ændres ofte, eller blande begge strategier på tværs af dit websted.

• Indbygget billedoptimering via next/image- komponenten viser automatisk billeder i korrekt størrelse og formateret i WebP med lazy loading. Dette forbedrer Core Web Vitals-scorerne direkte.

• Filbaseret routing gør dynamiske ruter ligetil. Oprettelse af en [slug].js -fil i din sidemappe håndterer automatisk alle URL'er til blogindlæg.

• API-ruter giver dig mulighed for at tilføje server-side logik, såsom formularbehandling eller webhook-håndtering, direkte i dit Next.js-projekt uden en separat backend.

• SEO-funktioner er indbyggede. Next.js gengiver fuld HTML på serveren, så søgemaskinecrawlere modtager komplet sideindhold uden at vente på, at JavaScript kører. Kombineret med next/head A-metatagkomponenten sikrer dette, at dit websted er SEO-konkurrencedygtigt.

REST API vs GraphQL med WordPress-indholdshentning

WordPress tilbyder to API-tilgange til headless-opsætninger:

WordPress REST API leveres med WordPress-kernen. Ingen yderligere plugins kræves. Den eksponerer slutpunkterne: /wp-json/wp/v2/posts for indlæg og /wp-json/wp/v2/pages for sider. Det er nemt at bruge fetch() og fungerer godt til simple indholdsbehov.

WPGraphQL er et plugin, der tilføjer et GraphQL-slutpunkt til WordPress. I stedet for at modtage et stort JSON- objekt med snesevis af felter, du ikke har brug for, skriver du en forespørgsel, der kun anmoder om de præcise felter, som din frontend kræver.

Dette reducerer nyttelaststørrelsen, forenkler hentning af indlejrede data (f.eks. indlæg med deres kategorier og forfatteroplysninger i en enkelt anmodning) og giver dit frontend-team et stærkt typebaseret skema at arbejde med.

For små projekter eller teams, der ikke bruger GraphQL før, er REST API'en fuldt ud tilstrækkelig. For større websteder med komplekse indholdsrelationer leverer WPGraphQL typisk bedre ydeevne og en renere udvikleroplevelse .

Forudsætninger for at bygge en headless opsætning med WordPress og Next.js

Før du skriver kode, skal du etablere et solidt fundament og forberede dit miljø.

Nødvendige værktøjer og miljøopsætning

For at følge med i en headless WordPress-opsætning, skal du have følgende værktøjer installeret på din maskine:

• Node.js (v18 eller nyere): Download fra nodejs.org. Kør node -v i din terminal for at bekræfte installationen.

• npm eller Yarn: npm leveres med Node.js. Yarn er valgfrit, men foretrækkes af nogle teams.

• En kørende WordPress-installation: lokal (ved hjælp af LocalWP, MAMP eller Docker) eller en hosted instans. Det eneste krav er, at den er tilgængelig via HTTP.

• En kodeeditor: VS Code med ESLint- og Prettier-udvidelserne giver dig den bedste Next.js-udviklingsoplevelse.

• Git: Til versionskontrol og implementeringsworkflows.

Til lokal WordPress-udvikling er LocalWP den hurtigste måde at oprette et WordPress-websted på din maskine uden konfiguration.

Installation af nødvendige WordPress-plugins (WPGraphQL, REST API)

WordPress REST API er som standard aktiveret i alle moderne WordPress-installationer. Du kan bekræfte, at det fungerer ved at besøge https://yoursite.com/wp-json/wp/v2/posts i din browser.

For WPGraphQL:

• Log ind på dit WordPress-dashboard.

• Naviger til Plugins → Tilføj ny.

• Søg efter WPGraphQL og installer plugin'et af Jason Bahl.

• Aktivér den.

• Et nyt GraphQL-menupunkt vises i dit dashboard. Gå til GraphQL → Indstillinger for at konfigurere slutpunktet.

Du kan også installere WPGraphQL til ACF, hvis du bruger Advanced Custom Fields, som eksponerer brugerdefinerede feltdata via dit GraphQL-skema.

For at teste dit GraphQL-slutpunkt skal du navigere til GraphQL → GraphiQL IDE i dit dashboard. Denne interaktive legeplads giver dig mulighed for at skrive og teste forespørgsler, før du bruger dem i dit Next.js-projekt.

WordPress API-konfiguration til headless levering

Flere WordPress-indstillinger påvirker levering af headless API'er:

• Permalinks: Gå til Indstillinger → Permalinks , og vælg en anden mulighed end "Almindelige". REST API'en fungerer ikke korrekt med almindelige permalinks. "Opslagsnavn" (/%postname%/) er det mest almindelige valg.

• CORS-headere: Som standard kan WordPress REST API-svar blokere cross-origin-forespørgsler fra din Next.js-udviklingsserver. Tilføj CORS-headere til dit WordPress-temas functions.php , eller brug et plugin som WP CORS til at tillade anmodninger fra dit Next.js-domæne.

• Applikationsadgangskoder: WordPress understøtter applikationsadgangskoder (introduceret i WordPress 5.6) til privat indhold eller kladdeindhold. Generer en i din brugerprofil, og inkluder den i dine API-anmodninger som en Basic Auth-header.

• Offentlig synlighed af indhold: Sørg for, at de opslag, du vil vise, er publicerede og ikke adgangskodebeskyttede eller private.

Forståelse af React og Next.js-grundlæggende før du starter

Headless WordPress-udvikling med Next.js forudsætter kendskab til:

• React-grundprincipper: Komponenter, props, tilstand og useEffect- og useState- hooks.

• Next.js-sidegengivelsesmetoder: at forstå forskellen mellem getStaticProps, getServerSidePropsog getStaticPaths Det er vigtigt

• Async JavaScript: Du skriver asynkron datahentningskode ved hjælp af async/await Fetch API'en.

• JSX-syntaks: Sådan skriver du HTML-lignende syntaks i JavaScript.

Hvis du er ny bruger af Next.js, vil det give dig en god idé at bruge et par timer på den officielle Next.js-tutorial på nextjs.org/learn, før du starter dette projekt.

Trin-for-trin guide til at forbinde WordPress og Next.js

Nu hvor fundamentet er lagt, lad os forbinde backend'en til frontend'en. Denne guide bruger Next.js Pages Router-paradigmet, som er meget brugt til statiske blogarkitekturer.

Trin 1: Oprettelse og konfiguration af et nyt Next.js-projekt

Åbn din terminal og opret en frisk Next.js-applikation ved hjælp af værktøjet create-next-app.

npx create-next-app@latest my-headless-site cd my-headless-site

Opsætningsguiden spørger, om du vil have TypeScript, ESLint, Tailwind CSS og App Router. Til denne guide skal du vælge Pages Router for maksimal kompatibilitet med eksisterende tutorials og plugins. TypeScript anbefales til større projekter.

Opret derefter en .env.local -fil i din projektrod for at gemme din WordPress-URL:

NEXT_PUBLIC_WORDPRESS_API_URL=https://your-wordpress-site.com/wp-json/wp/v2 WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql

Brug aldrig versionskontrol til at committe denne fil. Tilføj .env.local til din .gitignore.

Trin 2: Hentning af WordPress-data med REST API og getStaticProps

Opret en fil på pages/blog/index.js. Denne side viser alle blogindlæg hentet fra WordPress REST API:

eksporter standardfunktion BlogIndex({indlæg}) { returner (}<ul> {indlæg.kort((indlæg) => (<li key={post.id}> <a href={`/blog/${post.slug}`}>{indlæg.titel.renderet}</a></li> ))}</ul> ); } export async function getStaticProps() { const res = await fetch(`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?_embed&per_page=100` ); const posts = await res.json(); return { props: { posts }, revalidate: 60, }; }  Bemærk: `Read the props: { posts }` ..

getStaticProps kører på serveren under byggeprocessen. Den henter indlæg fra WordPress og sender dem som props til din komponent. Denne genvalidering: 60 aktiverer trinvis statisk regenerering, som er dækket i det avancerede afsnit.

Trin 3: Brug af WPGraphQL med Apollo- eller GraphQL-klient

For en mere skalerbar tilgang, brug WPGraphQL. Installer først en letvægts GraphQL-klient i dit Next.js-projekt.

npm installation @apollo/klient graphql

Opret en hjælpefil på lib/apolloClient.js:

import { ApolloClient, InMemoryCache } from "@apollo/client"; const client = new ApolloClient({ uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT, cache: new InMemoryCache(), }); export default client;   Vælg en klient som standard * ..

Forespørg derefter WordPress-indlæg ved hjælp af GraphQL i getStaticProps:

importer klient fra "../../lib/apolloClient"; import { gql } fra "@apollo/client"; const GET_POSTS = gql` query GetPosts { posts { nodes { id title slug date excerpt featuredImage { node { sourceUrl altText } } } } `; export async function getStaticProps() { const { data } = await client.query({ query: GET_POSTS }); return { props: { posts: data.posts.nodes }, revalidate: 60, }; }   Bemærk: ` * } ..

Denne tilgang henter kun de felter, som din frontend bruger, hvilket holder API-svarene effektive.

Trin 4: Dynamiske ruter og statisk generering til blogsider

For at oprette individuelle sider for hvert blogindlæg skal du bruge dynamisk routing. I Next.js skal du oprette en fil [slug].js i en pages/posts/ -mappe.

Du bruger getStaticPaths til at fortælle Next.js, hvilke URL'er der skal bygges, og getStaticProps til at hente det specifikke indhold for hver URL.

export async function getStaticPaths() { const res = await fetch(`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?per_page=100`); const posts = await res.json(); const paths = posts.map((post) => ({ params: { slug: post.slug }, })); return { paths, fallback: "blokering" }; } export async function getStaticProps({ params }) { const res = await fetch(`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&_embed`); const posts = await res.json(); if (!posts.length) { return { notFound: true };    Bemærk: }  Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Bemærk: } Be ... } return { props: { post: indlæg[0] }, revalidate: 60, }; }

getStaticPaths fortæller Next.js hvilke slugs der skal præ-renderes. Indstilling af fallback: "blokering" betyder, at enhver slug, der ikke er i den oprindelige build, bliver server-renderet på den første anmodning og derefter cachelagret som en statisk side.

Trin 5: Håndtering af opslagsindhold, billeder og brugerdefinerede felter

WordPress gemmer post body-indhold som rå HTML. Render det sikkert ved hjælp af Reacts dangerouslySetInnerHTML:

<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />

For fremhævede billeder skal du bruge _embed i REST API-anmodninger. Få adgang til billedets URL via post._embedded['wp:featuredmedia'][0].source_url.

Pak det ind i Next.js's Image- komponent for automatisk optimering:

importer billede fra "next/image"; <Image src={post._embedded["wp:featuredmedia"][0].source_url} alt={post.title.rendered} width={1200} height={630} />

For avancerede brugerdefinerede felter skal du aktivere WPGraphQL til ACF-pluginet. Brugerdefinerede feltdata vises derefter i dit GraphQL-skema og kan forespørges sammen med standardindlægsdata.

Avancerede teknikker til Headless WordPress og Next.js

Når det grundlæggende fungerer, kan du implementere avancerede funktioner, der får dit websted til at føles som en applikation i virksomhedsklassen.

Optimer med trinvis statisk regenerering (ISR)

Med ISR kan du opdatere statisk genererede sider efter implementering uden at skulle genopbygge hele dit websted. Hvordan du konfigurerer det afhænger af, hvilken Next.js-router du bruger, og at forveksle de to er en almindelig kilde til fejl.

Pages Router ISR (tidsbaseret)

Tilføj en revalidate- værdi (i sekunder) til din getStaticProps- retur:

return { props: { post }, revalidate: 300, // Regenerer hvert 5. minut };

Når en bruger besøger en side efter udløbet af revalideringsvinduet, viser Next.js den cachelagrede side med det samme, mens den regenereres i baggrunden. Den næste besøgende får den nye version.

Pages Router ISR (on-demand)

For on-demand revalidering udløst af en WordPress-publicerings- eller opdateringshændelse, skal du oprette en API-rute på pages/api/revalidate.js. WordPress kalder denne rute via en webhook:

export default async function handler(req, res) { if (req.query.secret !== process.env.REVALIDATION_SECRET) { return res.status(401).json({ message: "Ugyldig token" }); } const slug = req.query.slug; try { await res.revalidate(`/blog/${slug}`); return res.json({ revalidated: true }); } catch (err) { return res.status(500).send("Fejl ved revalidering"); } }      Fejl ved revalidering

res.revalidate() er den korrekte Pages Router-metode. Den udløser en øjeblikkelig baggrundsregenerering for den specifikke sti uden at vente på, at det tidsbaserede vindue udløber.

App-router ISR

Hvis du bruger App Router (app/ directory) i stedet for Pages Router, er syntaksen anderledes. Tidsbaseret revalidering er indstillet som en eksport af rutesegmentkonfiguration:

// app/blog/[slug]/page.js export const revalidate = 300;

On-demand revalidering i App Router bruger revalidatePath() eller revalidateTag(), importeret fra next/cache, i en Server Action eller Route Handler, ikke i en API Route:

// app/api/revalidate/route.js (App Router Route Handler) import { revalidatePath } from "next/cache"; import { NextResponse } from "next/server"; export async function POST(request) { const { slug, secret } = await request.json(); if (secret !== process.env.REVALIDATION_SECRET) { return NextResponse.json({ message: "Ugyldig token" }, { status: 401 }); } revalidatePath(`/blog/${slug}`); return NextResponse.json({ revalidated: true }); } ..

Vigtig forskel: res.revalidate() tilhører Pages Router. revalidatePath() og revalidateTag() tilhører App Router. Brug af App Router-metoder i et Pages Router-projekt, eller omvendt, vil forårsage lydløse fejl eller runtime-fejl. Match metoden med den router, du rent faktisk bruger.

Denne guides trinvise afsnit bruger Pages Router overalt. Hvis du migrerer til App Router i fremtiden, skal du opdatere al ISR-logik til at bruge revalidatePath() i Route Handlers i overensstemmelse hermed.

Tilføjelse af forhåndsvisningstilstand for kladdeindhold

Forhåndsvisningstilstand giver redaktører mulighed for at se udkast til WordPress-indhold på din Next.js-frontend før publicering. Opsæt to API-ruter:

• /api/preview: Aktiverer forhåndsvisningstilstand og omdirigerer til opslaget.
• /api/exit-preview: Deaktiverer forhåndsvisningstilstand.

I dit WordPress-tema eller plugin skal du konfigurere for forhåndsvisnings-URL (hvis du bruger WPGraphQL JWT-godkendelse) til at pege på https://your-nextjs-site.com/api/preview?secret=YOUR_SECRET&slug={slug}.

I getStaticPropsskal du kontrollere for forhåndsvisningstilstand og hente kladdeindhold:

export async function getStaticProps({ params, preview, previewData }) { const authHeader = preview ? { Authorization: `Bearer ${previewData.token}` } : {}; const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&status=draft`, { headers: authHeader } ); // ... } ..

Oprettelse af sitemaps og SEO-metadata i Next.js

Installer next-sitemap -pakken for automatisk generering af sitemap:

npm install next-sitemap

Opret en next-sitemap.config.js -fil, og konfigurer den til at inkludere alle WordPress-indlægsslugs, der hentes under build. Kør next-sitemap som et postbuild-script i din package.json.

For SEO-metadata pr. side skal du bruge next/head- komponenten eller, hvis du bruger App Router, den indbyggede Metadata API:

importer Head fra "next/head";<Head><title> {indlæg.titel.renderet} | Min blog </title><meta name="description" content="{post.excerpt.rendered}" /><meta property="og:title" content="{indlæg.titel.renderet}" /><meta property="og:image" content={featuredImageUrl} /></Head>

Brug RankMath-pluginnet i WordPress, og vis dets metadata via WPGraphQL med Add WPGraphQL SEO-pluginnet. Dette giver redaktører mulighed for at kontrollere titler og beskrivelser fra WordPress, som Next.js henter og gengiver.

Læs mere: Brug af WordPress som et Headless CMS

Cachingstrategier og SWR til klientsidehentning

Ikke alt indhold behøver at blive genereret statisk. Brugerspecifikke data, kommentarer eller realtidslager drager fordel af hentning på klientsiden. Brug swr -biblioteket fra Vercel:

npm installere swr

importer useSWR fra "swr"; const fetcher = (url) => fetch(url).then((r) => r.json()); function Kommentarer({ postId }) { const { data, error } = useSWR(`/wp-json/wp/v2/comments?post=${postId}`, fetcher ); if (error) return   * ...<p> Kunne ikke indlæse kommentarer.</p> ; hvis (!data) returnerer<p> Indlæser...</p> ; retur<ul> {data.kort((c) =><li key={c.id}> {c.indhold.renderet}</li> )}</ul> ; }

SWR håndterer caching, revalidering og deduplikering automatisk. Den bruger en "stale-while-revalidate"-strategi: den returnerer cachelagrede data med det samme og henter derefter lydløst nye data i baggrunden.

Bedste praksisser for implementering, ydeevne og sikkerhed for WordPress med Next.js

Implementer din Next.js frontend og WordPress backend som separate tjenester. Denne adskillelse er en af ​​​​de vigtigste fordele ved den headless model.

Next.js-implementering fungerer bedst på Vercel, platformen bygget af Next.js-teamet. Vercel håndterer ISR, edge caching, billedoptimering og administration af miljøvariabler direkte fra starten.

Netlify og AWS Amplify er solide alternativer. For selvhostede implementeringer, kør Next.js med npm run build && npm start bag en Nginx reverse proxy.

WordPress-implementering kan køre på enhver standard PHP-host (WP Engine, Kinsta, SiteGround) eller en VPS. Da WordPress kun serverer API-svar (ikke sidevisninger), håndterer selv beskeden hosting betydelig trafik.

Sikkerhedshærdning til headless WordPress:

• Flyt din WordPress-installation til et ikke-offentligt underdomæne som cms.ditdomæne.com.
• Deaktiver XML-RPC (add_filter('xmlrpc_enabled', '__return_false');).
• Brug en webapplikationsfirewall (WAF) som f.eks. Cloudflare.
• Begræns WordPress REST API til godkendte anmodninger om følsomme slutpunkter.
• Hold WordPress-kernen, temaerne og plugins opdaterede.
• Brug stærke applikationsadgangskoder til API-godkendelse.

til optimering af ydeevne Tjekliste

• Aktivér CDN-levering for dine statiske Next.js-aktiver.
• Brug next/image til alle billeder, det genererer responsive størrelser og serverer WebP automatisk.
• Minimer JavaScript på klientsiden ved at holde komponenter server-renderede, hvor det er muligt.
• Indstil passende HTTP-cacheheadere på WordPress API-svar.
• Brug en WordPress-objektcache (Redis eller Memcached) til at fremskynde databaseforespørgsler bag din API.

Fejlfinding af almindelige faldgruber i WordPress med Next.js Headless-opsætning

Det er givende at skifte til en headless opsætning, men det kræver en indlæringskurve. Her er de mest almindelige forhindringer, og hvordan man løser dem:

• CORS-fejl under udvikling: Din browser blokerer cross-origin-anmodninger fra localhost:3000 til dit WordPress-domæne. Tilføj CORS-headers til WordPress via functions.php eller brug WP CORS-pluginnet. Tillad oprindelse for både dine udviklings- og produktionsdomæner til Next.js.

• Permalinks returnerer 404: REST API'en kræver ikke-almindelige permalinks. Gå til Indstillinger → Permalinks , og gem alle ikke-almindelige indstillinger, selvom du ikke ændrer noget. Dette rydder omskrivningsreglerne.

• Billeder fra WordPress blokeret af Next.js: Next.js begrænser adgang til eksterne billeddomæner af sikkerhedsmæssige årsager. Tilføj dit WordPress-domæne til next.config.js:

modul.eksport = { billeder: { domæner: ["dit-wordpress-websted.com"], }, };

• HTML-enheder i gengivet indhold: WordPress REST API returnerer titler med HTML-enheder som &. Brug et lille værktøj til at afkode dem, eller installer html-entities npm-pakken.

• Byggeriet mislykkes på grund af for mange API-anmodninger: Hvis du har tusindvis af indlæg, kan hentning af alle slugs i getStaticPaths føre til timeout eller begrænsede treffhastigheder. Paginér dine anmodninger ved hjælp af page og per_page forespørgselsparametrene fallback: "blocking" og forhåndsrender kun dine seneste indlæg.

• GraphQL-skemafejl efter plugin-opdateringer: WPGraphQL-skemaet ændres, når du tilføjer eller fjerner plugins. Regenerer din Apollo-klientcache, eller ryd dit lokale skema-snapshot efter ændringer i WordPress-pluginet.

• Kladdeindlæg, der vises i produktion: Hvis du bruger status=any i dine API-forespørgsler under udvikling, skal du sørge for, at produktionsforespørgsler kun anmoder om status=publish. Brug miljøspecifikke API-parametre for at forhindre kladder i at blive vist offentligt.

Konklusion

Brug af WordPress med Next.js giver dig en skalerbar, SEO-venlig headless-arkitektur, der overgår traditionel WordPress på næsten alle målinger.

Dit indholdsteam beholder den velkendte WordPress-editor, mens dit udviklingsteam bygger med moderne React-værktøjer.

Opsætningen er afhængig af tre komponenter: WordPress som headless CMS, REST API eller WPGraphQL som datalag, og Next.js, der håndterer al frontend-rendering og performanceoptimering.

Start med REST API'en, brug WPGraphQL efterhånden som kompleksiteten vokser, og implementer derefter ISR, Preview Mode og on-demand revalidering, efterhånden som dit websted modnes. Implementer din Next.js-frontend til Vercel og WordPress på en dedikeret PHP-host for en ren, produktionsklar adskillelse.

Denne kombination er ikke længere eksperimentel. Den driver store udgivelsesplatforme, e-handelssider og virksomhedsapplikationer. Værktøjerne er modne, fællesskabet er aktivt, og ydeevneforbedringen er reel. Nu er det rette tidspunkt at bygge.

Ofte stillede spørgsmål om WordPress med Next.js til en headless hjemmeside