Come usare WordPress con Next.js per un sito web headless?

I siti web moderni richiedono velocità, flessibilità e un'ottimizzazione SEO impeccabile. Un sito WordPress headless con Next.js offre tutte e tre queste caratteristiche. Separando il sistema di gestione dei contenuti dal frontend, si ottiene il meglio di entrambi i mondi: la familiare esperienza di editing di WordPress e le velocissime capacità di rendering di Next.js.

Questa guida ti guiderà passo passo in ogni fase, dalla comprensione dell'architettura all'implementazione di un sito headless pronto per la produzione.

Che tu sia uno sviluppatore che sta esplorando configurazioni CMS disaccoppiate o un team che desidera modernizzare un sito WordPress legacy, questa risorsa dettagliata ti aiuterà.

TL;DR: Crea un sito web headless veloce e scalabile

• Utilizzare una configurazione disaccoppiata per separare la gestione dei contenuti dal frontend per una maggiore flessibilità.
• Recupera i contenuti tramite REST API o GraphQL per una distribuzione efficiente dei dati.
• Migliora le prestazioni con la generazione statica, il rendering del server e la memorizzazione nella cache intelligente.
• Distribuisci su piattaforme di hosting moderne e API sicure per velocità, scalabilità e protezione.

Cos'è Headless WordPress e perché abbinarlo a Next.js?

Per comprendere la potenza di questo stack, è necessario innanzitutto comprendere il concetto di architettura "headless" e perché queste due tecnologie specifiche formano una coppia così perfetta.

Definizione dell'architettura headless di WordPress CMS

WordPress tradizionale è un sistema monolitico. Gestisce l'archiviazione dei contenuti, la logica di business e il rendering delle pagine in un unico posto. Quando un visitatore arriva sul tuo sito, WordPress interroga il database, elabora i template PHP e fornisce una pagina HTML completamente renderizzata.

WordPress headless rompe questo modello. In un'architettura headless:

• WordPress funge solo da backend. Gestisce i contenuti, l'autenticazione degli utenti e l'archiviazione dei dati.

• Il frontend è completamente separato. Un framework JavaScript come Next.js gestisce tutto il rendering e l'interazione con l'utente.

• Un'API fa da ponte tra i due. WordPress espone i contenuti tramite la sua API REST o l'endpoint GraphQL, e Next.js recupera quei dati per creare le pagine.

Il termine "headless" deriva dall'eliminazione della "testa", ovvero il livello di presentazione del frontend, da WordPress.

La tua installazione di WordPress esiste ancora, gli editor continuano ad accedere a /wp-admine i post vengono creati allo stesso modo. Ma i visitatori non interagiscono mai direttamente con WordPress. Interagiscono con il tuo frontend Next.js.

Vantaggi della separazione del backend dal frontend

Separare il backend di WordPress dall'architettura frontend offre diversi vantaggi enormi:

• Vantaggi in termini di prestazioni: Next.js pre-renderizza le pagine come HTML statico in fase di compilazione. Non essendoci elaborazione PHP per ogni richiesta, si riduce drasticamente il Time to First Byte (TTFB).

• Libertà di frontend: puoi ricostruire o riprogettare il tuo frontend senza toccare WordPress. Cambia framework, riprogetta layout o esegui test A/B senza migrazioni CMS.

• Sicurezza migliorata: la tua installazione di WordPress può essere eseguita su un server privato o un sottodominio, nascosto da Internet. Gli aggressori non possono prendere di mira wp-login.phpse non riescono a trovarlo.

• Scalabilità: le pagine statiche servite da una CDN gestiscono senza problemi i picchi di traffico. Il tuo server WordPress riceve solo richieste API, non caricamenti di pagina.

• Distribuzione di contenuti multicanale: la stessa API di contenuti WordPress può servire contemporaneamente un sito web, un'app mobile, un assistente vocale e un chiosco.

• Migliore esperienza di sviluppo: i team frontend lavorano con strumenti React e JavaScript che già conoscono, senza dover imparare PHP o lo sviluppo di temi WordPress.

Perché Next.js è ideale per le prestazioni e la SEO di WordPress headless?

Next.js si distingue tra i framework JavaScript per progetti CMS headless per diversi motivi.

• Il rendering lato server (SSR) e la generazione di siti statici (SSG) ti danno il controllo su quando e come vengono renderizzate le pagine. Puoi generare staticamente il tuo blog in fase di build, eseguire il rendering lato server delle pagine prodotto che cambiano frequentemente o combinare entrambe le strategie sul tuo sito.

• L'ottimizzazione delle immagini integrata tramite il next/image serve automaticamente immagini di dimensioni corrette e formattate WebP con caricamento differito. Questo migliora direttamente i punteggi Core Web Vitals.

• Il routing basato su file semplifica i percorsi dinamici. La creazione di un [slug].js nella directory delle pagine gestisce automaticamente tutti gli URL dei post del blog.

• Le API Routes ti consentono di aggiungere logica lato server, come l'elaborazione dei moduli o la gestione dei webhook, direttamente nel tuo progetto Next.js senza un backend separato.

• Le funzionalità SEO sono native. Next.js esegue il rendering dell'HTML completo sul server, in modo che i crawler dei motori di ricerca ricevano il contenuto completo della pagina senza attendere l'esecuzione di JavaScript. In combinazione con il next/head, il tuo sito rimane competitivo in termini di SEO.

API REST vs GraphQL con recupero dei contenuti di WordPress

WordPress offre due approcci API per le configurazioni headless:

L'API REST di WordPress è inclusa nel core di WordPress. Non sono necessari plugin aggiuntivi. Espone gli endpoint: /wp-json/wp/v2/posts per i post e /wp-json/wp/v2/pages per le pagine. È semplice da usare con la funzione fetch() e funziona bene per esigenze di contenuto semplici.

WPGraphQL è un plugin che aggiunge un endpoint GraphQL a WordPress. Invece di ricevere un JSON con decine di campi non necessari, è possibile scrivere una query che richiede solo i campi esatti di cui il frontend ha bisogno.

Ciò riduce le dimensioni del payload, semplifica il recupero dei dati nidificati (ad esempio, post con le relative categorie e dettagli dell'autore in un'unica richiesta) e fornisce al team frontend uno schema fortemente tipizzato con cui lavorare.

Per progetti di piccole dimensioni o team alle prime armi con GraphQL, l'API REST è più che sufficiente. Per siti più grandi con relazioni complesse tra i contenuti, WPGraphQL offre in genere prestazioni migliori e un'esperienza di sviluppo .

Prerequisiti per la creazione di una configurazione headless di WordPress e Next.js

Prima di scrivere qualsiasi codice, è necessario stabilire delle solide basi e preparare l'ambiente.

Strumenti richiesti e configurazione dell'ambiente

Per procedere con la configurazione headless di WordPress, è necessario che sul computer siano installati i seguenti strumenti:

• Node.js (v18 o successiva): scaricalo da nodejs.org. Esegui node -v nel terminale per confermare l'installazione.

• npm o Yarn: npm è incluso in Node.js. Yarn è facoltativo ma preferito da alcuni team.

• Un'installazione di WordPress funzionante: locale (utilizzando LocalWP, MAMP o Docker) o un'istanza ospitata. L'unico requisito è che sia accessibile tramite HTTP.

• Un editor di codice: VS Code con le estensioni ESLint e Prettier ti offre la migliore esperienza di sviluppo con Next.js.

• Git: per il controllo delle versioni e i flussi di lavoro di distribuzione.

Per lo sviluppo WordPress locale, LocalWP è il modo più rapido per creare un sito WordPress sul tuo computer senza alcuna configurazione.

Installazione dei plugin WordPress necessari (WPGraphQL, REST API)

La REST API di WordPress è abilitata di default in tutte le installazioni moderne di WordPress. Puoi verificarne il funzionamento visitando https://yoursite.com/wp-json/wp/v2/posts nel tuo browser.

Per WPGraphQL:

• Accedi alla dashboard di WordPress.

• Vai su Plugin → Aggiungi nuovo.

• Cerca WPGraphQL e installa il plugin di Jason Bahl.

• Attivalo.

• Nella dashboard è stata aggiunta una nuova voce di menu GraphQL. Visita GraphQL → Impostazioni per configurare l'endpoint.

È anche possibile installare WPGraphQL per ACF se si utilizzano Advanced Custom Fields, che espone i dati dei campi personalizzati tramite lo schema GraphQL.

Per testare il tuo endpoint GraphQL, vai su GraphQL → GraphiQL IDE nella tua dashboard. Questo ambiente di test interattivo ti permette di scrivere e testare le query prima di utilizzarle nel tuo progetto Next.js.

Configurazione API di WordPress per la consegna headless

Diverse impostazioni di WordPress influiscono sulla distribuzione dell'API headless:

• Permalink: Vai su Impostazioni → Permalink e seleziona un'opzione diversa da "Semplice". L'API REST non funziona correttamente con i permalink semplici. "Nome del post" (/%postname%/) è la scelta più comune.

• Intestazioni CORS: per impostazione predefinita, le risposte dell'API REST di WordPress potrebbero bloccare le richieste cross-origin provenienti dal server di sviluppo di Next.js. Aggiungi le intestazioni CORS al file functions.php del tuo tema WordPress oppure utilizza un plugin come WP CORS per consentire le richieste dal dominio di Next.js.

• Password per le applicazioni: per i contenuti privati ​​o in bozza, WordPress supporta le password per le applicazioni (introdotte in WordPress 5.6). Generane una nel tuo profilo utente e includila nelle tue richieste API come intestazione di autenticazione di base.

• Visibilità dei contenuti pubblici: assicurati che i post che vuoi visualizzare siano pubblicati e non protetti da password o privati.

Nozioni di base su React e Next.js prima di iniziare

Lo sviluppo headless di WordPress con Next.js presuppone la familiarità con:

• Nozioni fondamentali di React: componenti, oggetti di scena, stato e useEffect e useState .

• Metodi di rendering della pagina Next.js: è essenziale comprendere la differenza tra getStaticProps , getServerSideProps e getStaticPaths

• JavaScript asincrono: Scriverai codice per il recupero asincrono dei dati utilizzando async/await dell'API Fetch.

• Sintassi JSX: come scrivere una sintassi simile a HTML all'interno di JavaScript.

Se sei nuovo di Next.js, dedicare qualche ora al tutorial ufficiale di Next.js su nextjs.org/learn prima di iniziare questo progetto ti darà i suoi frutti.

Guida passo passo per connettere WordPress e Next.js

Ora che le basi sono state gettate, colleghiamo il backend al frontend. Questa guida utilizza il paradigma Next.js Pages Router, ampiamente impiegato per le architetture di blog statici.

Passaggio 1: creazione e configurazione di un nuovo progetto Next.js

Apri il terminale e crea una nuova applicazione Next.js utilizzando l'utilità create-next-app.

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

La procedura guidata di configurazione chiede se si desidera utilizzare TypeScript, ESLint, Tailwind CSS e App Router. Per questa guida, si consiglia di scegliere Pages Router per la massima compatibilità con tutorial e plugin esistenti. TypeScript è consigliato per progetti di grandi dimensioni.

Successivamente, crea un .env.local nella radice del tuo progetto per memorizzare l'URL di WordPress:

NEXT_PUBLIC_WORDPRESS_API_URL=https://il-tuo-sito-wordpress.com/wp-json/wp/v2 WORDPRESS_GRAPHQL_ENDPOINT=https://il-tuo-sito-wordpress.com/graphql

Non sottoporre mai questo file al controllo di versione. Aggiungi .env.local al tuo file .gitignore.

Passaggio 2: recupero dei dati di WordPress con REST API e getStaticProps

Crea un file in pages/blog/index.js. Questa pagina elenca tutti i post del blog recuperati dalla REST API di WordPress:

esporta la funzione predefinita BlogIndex({ post }) { return (<ul> {post.map((post) => (<li key={post.id}> <a href={`/blog/${post.slug}`}>{post.title.rendered}</a></li> ))}</ul> ); } esporta funzione asincrona 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, }; }

getStaticProps viene eseguito in fase di compilazione sul server. Recupera i post da WordPress e li passa come prop al componente. Questo revalidate: 60 abilita la rigenerazione statica incrementale, descritta nella sezione avanzata.

Passaggio 3: utilizzo di WPGraphQL con Apollo o GraphQL Client

Per un approccio più scalabile, usa WPGraphQL. Per prima cosa, installa un client GraphQL leggero nel tuo progetto Next.js.

npm install @apollo/client graphql

Creare un file di utilità in lib/apolloClient.js:

importa { ApolloClient, InMemoryCache } da "@apollo/client"; const client = new ApolloClient({ uri: process.env.WORDPRESS_GRAPHQL_ENDPOINT, cache: new InMemoryCache(), }); esporta client predefinito;

Quindi interroga i post di WordPress utilizzando GraphQL in getStaticProps:

importa client da "../../lib/apolloClient"; importa { gql } da "@apollo/client"; const GET_POSTS = gql` query GetPosts { post { nodi { id titolo slug data estratto featuredImage { nodo { sourceUrl altText } } } } } `; esporta funzione asincrona getStaticProps() { const { dati } = attendi client.query({ query: GET_POSTS }); restituisci { props: { post: data.posts.nodes }, riconvalida: 60, }; }

Questo approccio recupera solo i campi utilizzati dal frontend, mantenendo snelle le risposte API.

Fase 4: Percorsi dinamici e generazione statica per le pagine del blog

Per creare pagine individuali per ogni post del blog, è necessario utilizzare il routing dinamico. In Next.js, crea un file [slug].js all'interno della directory pages/posts/

Utilizzerai getStaticPaths per indicare a Next.js quali URL creare e getStaticProps per recuperare il contenuto specifico per ciascun URL.

esporta la funzione asincrona 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: "blocking" }; } esporta la funzione asincrona 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 }; } return { props: { post: posts[0] }, revalidate: 60, }; }

`getStaticPaths` indica a Next.js quali slug pre-renderizzare. Impostando `fallback: "blocking"` si intende che qualsiasi slug non presente nella build iniziale viene renderizzato lato server alla prima richiesta e quindi memorizzato nella cache come pagina statica.

Fase 5: Gestione del contenuto dei post, delle immagini e dei campi personalizzati

WordPress memorizza il contenuto del corpo del post come HTML grezzo. Renderizzalo in modo sicuro utilizzando dangerouslySetInnerHTML:

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

Per le immagini in evidenza, usa il _embed nelle richieste API REST. Accedi all'URL dell'immagine tramite post._embedded['wp:featuredmedia'][0].source_url.

Avvolgilo con Image per l'ottimizzazione automatica:

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

Per i campi personalizzati avanzati, abilita il plugin WPGraphQL per ACF. I dati dei campi personalizzati appariranno quindi nello schema GraphQL e potranno essere interrogati insieme ai dati standard dei post.

Tecniche avanzate per WordPress headless e Next.js

Una volta che le funzionalità di base sono funzionanti, puoi implementare funzionalità avanzate per far sì che il tuo sito sembri un'applicazione di livello aziendale.

Ottimizza con la rigenerazione statica incrementale (ISR)

ISR consente di aggiornare le pagine generate staticamente dopo la distribuzione senza dover ricostruire l'intero sito. La configurazione dipende dal router Next.js utilizzato e confondere i due è una fonte comune di bug.

Pagine Router ISR (basato sul tempo)

Aggiungi un di convalida (in secondi) al di getStaticProps :

return { props: { post }, revalidate: 300, // Rigenera ogni 5 minuti };

Quando un utente visita una pagina dopo la scadenza della finestra di convalida, Next.js pubblica immediatamente la pagina memorizzata nella cache, rigenerandola in background. Il visitatore successivo riceverà la versione aggiornata.

Pagine Router ISR (su richiesta)

Per la convalida su richiesta attivata da un evento di pubblicazione o aggiornamento di WordPress, crea un percorso API in pages/api/revalidate.js. WordPress richiama questo percorso tramite un webhook:

esporta la funzione asincrona predefinita handler(req, res) { if (req.query.secret !== process.env.REVALIDATION_SECRET) { return res.status(401).json({ message: "Token non valido" }); } const slug = req.query.slug; try { await res.revalidate(`/blog/${slug}`); return res.json({ revalidated: true }); } catch (err) { return res.status(500).send("Errore durante la riconvalida"); } }

res.revalidate() è il metodo corretto del Pages Router. Attiva una rigenerazione immediata in background per quel percorso specifico, senza attendere la scadenza della finestra temporale.

App Router ISR

Se si utilizza l'App Router (app/ ) anziché il Pages Router, la sintassi è diversa. La convalida basata sul tempo viene impostata come esportazione della configurazione del segmento di percorso:

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

La convalida su richiesta nell'App Router utilizza revalidatePath() o revalidateTag(), importati da next/cache, all'interno di un'azione server o di un gestore di route, non all'interno di un percorso API:

// app/api/revalidate/route.js (gestore di percorsi del router dell'app) 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: "Token non valido" }, { status: 401 }); } revalidatePath(`/blog/${slug}`); return NextResponse.json({ revalidated: true }); }

Differenza fondamentale: `res.revalidate()` appartiene al Router delle Pagine. `revalidatePath()` e `revalidateTag()` appartengono al Router dell'App. L'utilizzo di metodi del Router dell'App all'interno di un progetto del Router delle Pagine, o viceversa, causerà errori silenziosi o errori di runtime. Assicurati che il metodo corrisponda al router che stai effettivamente utilizzando.

La sezione passo passo di questa guida utilizza Pages Router in tutte le sue parti. Se in futuro si effettua la migrazione ad App Router, è necessario aggiornare tutta la logica ISR in modo che utilizzi revalidatePath() nei Route Handler.

Aggiunta della modalità di anteprima per il contenuto bozza

La modalità di anteprima consente agli editor di visualizzare le bozze dei contenuti WordPress sul frontend Next.js prima della pubblicazione. Imposta due percorsi API:

• /api/preview: Abilita la modalità di anteprima e reindirizza al post.
• /api/exit-preview: Disabilita la modalità di anteprima.

Nel tuo tema o plugin WordPress, configura l' URL di anteprima (se utilizzi l'autenticazione JWT di WPGraphQL) in modo che punti a https://your-nextjs-site.com/api/preview?secret=YOUR_SECRET&slug={slug}.

In getStaticProps, controlla la modalità di anteprima e recupera il contenuto della bozza:

funzione asincrona di esportazione getStaticProps({params, preview, previewData}) { const authHeader = preview? { Autorizzazione: `Bearer ${previewData.token}`}: {}; const res = await fetch( `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts?slug=${params.slug}&status=draft`, { headers: authHeader}); // ...}

Creazione di mappe del sito e metadati SEO in Next.js

Installa il next-sitemap per la generazione automatica della mappa del sito:

npm installa next-sitemap

Crea un next-sitemap.config.js e configuralo in modo che includa tutti gli slug dei post di WordPress recuperati in fase di build. Esegui next-sitemap come script postbuild nel tuo package.json.

Per i metadati SEO per pagina, utilizzare il next/head oppure, se si utilizza App Router, l'API Metadata integrata:

importa Head da "next/head";<Head><title> {post.title.rendered} | Il mio blog </title><meta name="description" content="{post.excerpt.rendered}" /><meta property="og:title" content="{post.title.rendered}" /><meta property="og:image" content={featuredImageUrl} /></Head>

Utilizza il plugin RankMath in WordPress ed esponine i metadati tramite WPGraphQL con il plugin "Aggiungi WPGraphQL SEO". Questo consente agli editor di controllare titoli e descrizioni da WordPress, che Next.js recupera e visualizza.

Per saperne di più: Usare WordPress come CMS headless

Strategie di caching e SWR per il recupero lato client

Non tutti i contenuti devono essere generati staticamente. Dati specifici dell'utente, commenti o inventari in tempo reale traggono vantaggio dal recupero lato client. Utilizza la swr di Vercel:

npm install swr

importa useSWR da "swr"; const fetcher = (url) => fetch(url).then((r) => r.json()); function Comments({ postId }) { const { data, error } = useSWR( `/wp-json/wp/v2/comments?post=${postId}`, fetcher ); if (error) return<p> Impossibile caricare i commenti.</p> ; se (!data) restituisci<p> Caricamento...</p> ; ritorno<ul> {data.map((c) =><li key={c.id}> {c.content.rendered}</li> )}</ul> ; }

SWR gestisce automaticamente la memorizzazione nella cache, la riconvalida e la deduplicazione. Utilizza una strategia di conservazione dei dati inattivi durante la riconvalida: restituisce immediatamente i dati memorizzati nella cache, quindi recupera silenziosamente i dati nuovi in ​​background.

Best practice per distribuzione, prestazioni e sicurezza per WordPress con Next.js

Distribuisci il frontend Next.js e il backend WordPress come servizi separati. Questa separazione è uno dei principali vantaggi del modello headless.

L'implementazione di Next.js funziona al meglio su Vercel, la piattaforma sviluppata dal team di Next.js. Vercel gestisce ISR, edge caching, ottimizzazione delle immagini e gestione delle variabili d'ambiente in modo integrato.

Netlify e AWS Amplify sono valide alternative. Per le implementazioni self-hosted, esegui Next.js con `npm run build && npm start` dietro un reverse proxy Nginx.

L'implementazione di WordPress può essere eseguita su qualsiasi host PHP standard (WP Engine, Kinsta, SiteGround) o su un VPS. Poiché WordPress gestisce solo le risposte API (non le visualizzazioni di pagina), anche un hosting modesto gestisce un traffico significativo.

Rafforzamento della sicurezza per WordPress headless:

• Sposta la tua installazione di WordPress in un sottodominio non pubblico come cms.tuodominio.com.
• Disabilita XML-RPC (add_filter('xmlrpc_enabled', '__return_false');).
• Utilizzare un Web Application Firewall (WAF) come Cloudflare.
• Limitare l'API REST di WordPress alle richieste autenticate per endpoint sensibili.
• Mantieni aggiornati il ​​core, i temi e i plugin di WordPress.
• Utilizzare password applicative complesse per l'autenticazione API.

per l'ottimizzazione delle prestazioni :

• Abilita la distribuzione CDN per le tue risorse statiche Next.js.
• Utilizzare next/image per tutte le immagini: genera dimensioni responsive e serve WebP automaticamente.
• Ridurre al minimo il codice JavaScript lato client mantenendo i componenti renderizzati sul server, ove possibile.
• Imposta le intestazioni della cache HTTP appropriate nelle risposte API di WordPress.
• Utilizza una cache di oggetti WordPress (Redis o Memcached) per velocizzare le query del database dietro la tua API.

Risoluzione dei problemi comuni in WordPress con la configurazione headless di Next.js

Il passaggio a una configurazione headless è gratificante, ma richiede un po' di apprendimento. Ecco gli ostacoli più comuni e come risolverli:

• Errori CORS in fase di sviluppo: il tuo browser blocca le richieste cross-origin da localhost:3000 al tuo dominio WordPress. Aggiungi intestazioni CORS a WordPress tramite functions.php o utilizza il plugin WP CORS. Consenti le origini sia per i tuoi domini Next.js di sviluppo che di produzione.

• I permalink restituiscono un errore 404: l'API REST richiede permalink non standard. Vai su Impostazioni → Permalink e salva qualsiasi opzione non standard, anche se non modifichi nulla. In questo modo vengono eliminate le regole di riscrittura.

• Immagini di WordPress bloccate da Next.js: Next.js limita l'accesso ai domini di immagini esterni per motivi di sicurezza. Aggiungi il tuo dominio WordPress a next.config.js:

module.exports = { immagini: { domini: ["your-wordpress-site.com"], }, };

• Entità HTML nei contenuti renderizzati: l'API REST di WordPress restituisce titoli con entità HTML come &. Utilizza una piccola utility per decodificarle o installa il html-entities .

• La build non riesce a causa di troppe richieste API: se hai migliaia di post, il recupero di tutti gli slug in getStaticPaths potrebbe andare in timeout o raggiungere i limiti di frequenza. Utilizza la paginazione per le tue richieste usando i page e per_page oppure usa il fallback: "blocking" e pre-renderizza solo i post più recenti.

• Errori nello schema GraphQL dopo gli aggiornamenti dei plugin: lo schema WPGraphQL cambia quando aggiungi o rimuovi plugin. Rigenera la cache del client Apollo o cancella lo snapshot dello schema locale dopo le modifiche al plugin di WordPress.

• Bozze di post visualizzate in produzione: se utilizzi status=any nelle query API durante lo sviluppo, assicurati che le query di produzione richiedano solo status=publish. Utilizza parametri API specifici per l'ambiente per evitare che le bozze vengano visualizzate pubblicamente.

Conclusione

Utilizzando WordPress con Next.js avrai a disposizione un'architettura headless scalabile e ottimizzata per la SEO, che supera le prestazioni del WordPress tradizionale in quasi tutti i parametri.

Il tuo team addetto ai contenuti manterrà il familiare editor di WordPress, mentre il tuo team di sviluppo utilizzerà i moderni strumenti React.

La configurazione si basa su tre componenti: WordPress come CMS headless, REST API o WPGraphQL come livello dati e Next.js che gestisce tutto il rendering frontend e l'ottimizzazione delle prestazioni.

Inizia con l'API REST, adotta WPGraphQL man mano che la complessità aumenta, quindi aggiungi ISR, modalità di anteprima e rivalidazione on-demand man mano che il tuo sito matura. Distribuisci il tuo frontend Next.js su Vercel e WordPress su un host PHP dedicato per una separazione pulita e pronta per la produzione.

Questa combinazione non è più sperimentale. È alla base delle principali piattaforme editoriali, siti di e-commerce e applicazioni aziendali. Gli strumenti sono maturi, la community è attiva e i miglioramenti in termini di prestazioni sono concreti. Ora è il momento giusto per iniziare.

Domande frequenti su WordPress con Next.js per un sito headless