WordPress headless disaccoppia il backend di gestione dei contenuti dal livello di presentazione del frontend. WordPress gestisce la creazione dei contenuti, l'archiviazione e la consegna tramite API, mentre un frontend separato — costruito con Next.js, Nuxt o un altro framework — gestisce il rendering e l'interazione con l'utente.
Questo approccio offre vantaggi significativi: migliori prestazioni tramite server-side rendering, architetture frontend più flessibili e una sicurezza più forte nascondendo la superficie admin di WordPress. Next.js è emerso come il framework frontend più popolare per WordPress headless, e questa guida copre come configurarlo.
Perché Passare a Headless?
L'architettura headless brilla in scenari specifici. Se ti serve un frontend altamente personalizzato con interazioni complesse — come una piattaforma di corsi, un sito directory o un'app mobile alimentata da WordPress — headless ti dà il controllo completo sull'esperienza utente. Migliora inoltre le prestazioni servendo HTML pre-renderizzato da una CDN.
I compromessi sono reali: mantieni due codebase invece di una, l'anteprima dei contenuti è più complessa e perdi l'accesso alla gerarchia dei template del frontend di WordPress.
Configurazione del Backend WordPress
La tua installazione WordPress diventa un CMS headless. Abilita la REST API — è attiva per impostazione predefinita nel WordPress moderno. Installa WPGraphQL per un'API GraphQL più flessibile, oppure usa la REST API integrata per configurazioni più semplici. Aggiungi tipi di contenuto personalizzati e campi personalizzati avanzati secondo necessità per strutturare i tuoi contenuti.
Abilita la funzionalità Application Password in WordPress per le richieste API autenticate. Installa il plugin Simply Static o WP2Static per generare esportazioni statiche se vuoi distribuire un sito completamente statico. Configura gli header CORS per consentire al dominio del tuo frontend di accedere all'API.
Costruire il Frontend Next.js
Crea un progetto Next.js con npx create-next-app. Installa Apollo Client o SWR per il recupero dei dati dalla tua API WordPress. Crea pagine che recuperano i contenuti WordPress al momento della build usando getStaticProps o al momento della richiesta usando getServerSideProps.
Per i post del blog, crea una route dinamica con [slug].js che recupera un singolo post dall'API WordPress e lo renderizza con i tuoi componenti frontend. Per un sito completo, crea pagine per post, pagine, tipi di contenuto personalizzati, categorie, tag e la homepage — ognuna con la strategia di recupero dati appropriata.
Strategie di Rendering
Next.js offre molteplici strategie di rendering che puoi combinare all'interno di un singolo sito. La Static Site Generation (SSG) pre-renderizza le pagine al momento della build — ideale per i post del blog che non cambiano frequentemente. Il Server-Side Rendering (SSR) renderizza le pagine a ogni richiesta — buono per i contenuti aggiornati frequentemente. L'Incremental Static Regeneration (ISR) ri-renderizza le pagine statiche in background quando i contenuti cambiano.
Per un sito WordPress headless, l'ISR è spesso la scelta migliore: ti dà le prestazioni delle pagine statiche con la freschezza dei contenuti renderizzati sul server.
Anteprima dei Contenuti
Una delle sfide più grandi in WordPress headless è l'anteprima dei contenuti. Nel WordPress tradizionale, l'anteprima funziona perché il sistema dei template renderizza le bozze. In una configurazione headless, devi costruire il tuo meccanismo di anteprima.
Crea un endpoint di anteprima in Next.js che accetti un ID post e un nonce da WordPress. Verifica il nonce, recupera la bozza dall'API WordPress e renderizzala. Configura l'URL di anteprima di WordPress per puntare al tuo endpoint di anteprima Next.js con i parametri appropriati.
Deployment
Distribuisci il tuo frontend Next.js su Vercel, Netlify o un VPS. Configura le variabili d'ambiente per l'URL della tua API WordPress e qualsiasi chiave API. Imposta webhook in WordPress per attivare le rebuild quando i contenuti cambiano — questo mantiene aggiornate le tue pagine statiche senza rebuild manuali.
Per il backend WordPress, qualsiasi hosting che supporti WordPress funziona. Il backend non deve essere ad alte prestazioni perché serve solo richieste API, non caricamenti di pagine. Un VPS di base o un host WordPress gestito è sufficiente.
Il punto fondamentale
WordPress headless con Next.js ti dà il meglio di entrambi i mondi: un backend di gestione dei contenuti potente e familiare con un frontend moderno e ad alte prestazioni. È più lavoro del WordPress tradizionale, ma per i siti che necessitano di frontend personalizzati, esperienze interattive o prestazioni globali, l'investimento ripaga.
