WordPress esiste da oltre 20 anni e, secondo W3Techs, alimenta il 42,7% di tutti i siti web su Internet. Inoltre, detiene una quota di mercato del 62,5% per i sistemi di gestione dei contenuti (CMS) dietro ai siti web.
Oggi sono disponibili molti linguaggi di programmazione e framework per costruire siti web facili da usare e ad alte prestazioni che sono molto più veloci di WordPress, a prescindere dalle ottimizzazioni effettuate nella bacheca di WordPress. Un esempio è Next.js, un popolare framework React.
Questa guida mostra come utilizzare WordPress come CMS headless, fornendo i dati per un’applicazione Next.js. Spiega anche come distribuire il codice Next.js come sito statico sul servizio gratuito di Hosting di Siti Statici di Kinsta.
Come funziona WordPress Headless
Per WordPress headless si intende l’utilizzo di WordPress solo per le sue funzionalità di backend (gestione e archiviazione dei contenuti) e l’utilizzo di un sistema separato, come Next.js, per la presentazione del frontend.
Questo disaccoppiamento consente agli sviluppatori di utilizzare i solidi strumenti di gestione dei contenuti di WordPress e di sfruttare appieno le moderne funzionalità di sviluppo frontend, come il rendering lato server e la generazione di siti statici in Next.js.
Preparare il sito WordPress
Prima di immergerci nello sviluppo di Next.js, il vostro sito WordPress avrà bisogno di un po’ di preparazione per essere utilizzato come CMS headless.
Se non avete già un sito WordPress, potete crearlo facilmente con Kinsta. Esistono tre metodi per creare un sito WordPress con Kinsta:
- Creare un sito sul vostro computer locale (magari utilizzando i nostri strumenti DevKinsta) prima di spostare il sito sui nostri server
- Creare un sito in remoto utilizzando la dashboard MyKinsta
- Creare un sito in remoto utilizzando l’API di Kinsta
Una volta creato un sito WordPress, ci sono due approcci per recuperare i dati dal CMS WordPress al vostro framework frontend: WPGraphQL e REST API.
L’API REST facilita il recupero dei dati in formato JSON utilizzando approcci JavaScript come Fetch API o la libreria Axios. L’API REST è integrata in WordPress dalla versione 4.7, quindi non richiede alcun plugin per funzionare. Ma per utilizzare WPGraphQL, che permette di interagire con i dati di WordPress utilizzando query GraphQL, è necessario installare il plugin WPGraphQL.
In questa guida utilizzeremo l’API REST. Per ottenere i dati di WordPress in formato JSON, aggiungete /wp-json/wp/v2 all’URL del vostro sito WordPress:
http://yoursite.com/wp-json/wp/v2Se l’API JSON non è abilitata per impostazione predefinita quando visitate http://yoursite.com/wp-json, potete abilitarla aprendo Permalink sotto Impostazioni nella bacheca di WordPress e selezionando Nome del post o qualsiasi altra opzione a vostra scelta, tranne Semplice:
Funziona per i siti WordPress locali e pubblici e offre endpoint per i contenuti che includono post, pagine, commenti e media. Leggete la nostra guida completa alle API REST per saperne di più.
Configurare l’ambiente Next.js
Next.js aiuta gli sviluppatori a creare applicazioni web con facilità, migliorando le prestazioni e ottimizzando l’esperienza di sviluppo. Una delle sue caratteristiche principali è il routing basato su file, che semplifica la creazione di percorsi.
Next.js si concentra anche sulle prestazioni, offrendo funzioni come lo splitting automatico del codice, che carica solo il JavaScript necessario per ogni pagina, riducendo in modo significativo il tempo di caricamento.
Per configurare un progetto Next.js, potete eseguire il seguente comando e utilizzare le risposte predefinite:
npx create-next-app@latest nextjs-wp-demoPer questa guida, potete prendere il nostro template di avvio Git seguendo questi passi:
- Visitate il repository GitHub di questo progetto.
- Seleziona Use this template > Create a new repository per copiare il codice di partenza in un repository all’interno del vostro account GitHub (selezionate la casella per includere tutti i branch).
- Estraete il repository sul vostro computer locale e passate al branch starter-files usando il comando:
git checkout starter-files.
- Installate le dipendenze necessarie eseguendo il comando
npm install.
Una volta completata l’installazione, lanciate il progetto sul vostro computer locale con npm run dev. In questo modo il progetto sarà disponibile all’indirizzo http://localhost:3000/.
Il progetto
L’App Router è stato introdotto in Next.js 13, sostituendo la directory pages esistente per il routing. Il routing con l’App Router comporta anche la creazione di cartelle all’interno della cartella app. Poi, annida un file page.js all’interno della cartella appropriata per definire il vostro percorso.
In questo progetto, app è la cartella principale con cui interagire e troverete la seguente struttura di file.
/
|-- /app
|-- /blog
|-- /[postId]
|-- page.js
|-- page.js
|-- globals.css
|-- layout.js
|-- navbar.js
|-- page.jsVengono create tre pagine: la pagina iniziale per visualizzare le informazioni di base, la pagina del blog per visualizzare tutti i post del vostro CMS WordPress e la pagina dinamica ([postId]/page.js) per il rendering dei singoli post.
Noterete anche il componente navbar.js, che viene importato nel file layout.js per creare un layout per il progetto.
Recuperare i dati da WordPress a Next.js
Con l’API REST di WordPress, potete recuperare post, pagine e tipi di post personalizzati inviando richieste HTTP a endpoint specifici.
Facciamo una richiesta di fetch nel file blog/page.js per recuperare tutti i post del vostro CMS WordPress e poi facciamo una richiesta per recuperare ogni post dinamicamente nel file blog/[postId]/page.js in base al parametro id passato.
Prima di effettuare queste richieste, è buona norma aggiungere l’indirizzo dell’API JSON a una variabile d’ambiente. Questo approccio garantisce che l’URL di base dell’API sia facilmente configurabile e non codificato in più file.
Create un file .env nella root del vostro progetto Next.js e aggiungete quanto segue:
NEXT_PUBLIC_WORDPRESS_API_URL=https://yoursite.kinsta.cloud/wp-json/wp/v2Assicuratevi di sostituire l’URL con l’API JSON del vostro sito. Inoltre, aggiungete .env al vostro file .gitignore in modo da non inviare il file al vostro provider Git.
Recuperare tutti i post da WordPress a Next.js
Per recuperare tutti i post dal vostro sito WordPress, create una funzione asincrona chiamata getPosts nel vostro file blog/page.js. Questa funzione utilizza l’API Fetch per effettuare una richiesta GET all’endpoint /posts dell’API REST di WordPress.
async function getPosts() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts;
}Una volta ricevuta la risposta, la converte in JSON e crea un array di oggetti post. Questi posts possono essere resi nella vostra applicazione Next.js, fornendo un elenco dinamico di post del blog prelevati direttamente da WordPress.
const BlogPage = async () => {
const posts = await getPosts();
return (
<div className="blog-page">
<h2>All Blog Posts</h2>
<p>All blog posts are fetched from WordPress via the WP REST API.</p>
<div className="posts">
{posts.map((post) => {
return (
<Link href={`/blog/${post.id}`} className="post" key={post.id}>
<h3>{post.title.rendered}</h3>
<p
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
></p>
</Link>
);
})}
</div>
</div>
);
};All’interno del componente pagina di Next.js, chiamate getPosts in modo asincrono per recuperare i post. Poi, passate map sopra l’array di posts, rendendo title e excerpt di ogni post all’interno di un componente <Link>.
In questo modo, non solo vengono visualizzati i post, ma ognuno di essi viene anche racchiuso in un link che rimanda a una visualizzazione dettagliata del post. Questo risultato è ottenuto utilizzando il routing basato su file di Next.js, dove l’ID del post viene utilizzato per generare dinamicamente il percorso dell’URL.
Recuperare i post dinamici da WordPress a Next.js
Nel codice qui sopra, ogni post è racchiuso in un link che dovrebbe aiutare gli utenti a navigare verso una vista dettagliata del post.
Per le pagine dei singoli post, si utilizza il routing dinamico in Next.js per creare una pagina che recupera e visualizza un singolo post in base al suo ID. Una pagina dinamica [postID]/page.js è già stata creata nel codice di stater-files.
Create una funzione getSinglePost, simile a getPosts, per recuperare un singolo post utilizzando l’ID del post passato come parametro.
async function getSinglePost(postId) {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts/${postId}`
);
const post = await response.json();
return post;
}Nel componente della pagina dinamica, estraete l’ID del post dai parametri dell’URL, chiamate getSinglePost con questo ID e renderizzate il contenuto del post.
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
// ... the rest of the page code
};Potete quindi riempire la pagina con i dati recuperati:
const page = async ({ params }) => {
const post = await getSinglePost(params.postId);
if (!post) {
return <div>Loading...</div>;
}
return (
<div className="single-blog-page">
<h2>{post.title.rendered}</h2>
<div className="blog-post">
<p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}></p>
</div>
</div>
);
};Potete accedere al codice completo sul nostro repository GitHub.
Distribuire l’applicazione Next.js su Kinsta gratuitamente
Il servizio di Hosting di Siti Statici di Kinsta offre la possibilità di ospitare gratis fino a 100 siti statici.
Questo servizio ospita solo file statici. Se utilizzate un generatore di siti statici come Next.js, potete configurare le opzioni per creare il vostro progetto da GitHub e distribuire i file statici su Kinsta.
Rendering statico in Next.js
Per abilitare l’esportazione statica in Next.js versione 13 o superiore, modificate la modalità output all’interno di next.config.js:
const nextConfig = {
output: 'export',
};Ora, quando costruite il vostro progetto, Next.js dovrebbe produrre una cartella out che contiene le risorse HTML, CSS e JavaScript dell’applicazione.
Dalla versione 13, Next.js supporta l’avvio come sito statico e il successivo aggiornamento opzionale per l’utilizzo di funzionalità che richiedono un server. Quando utilizzate le funzionalità del server, la creazione delle pagine non genererà pagine statiche.
Ad esempio, nel percorso dinamico, i dati vengono recuperati dinamicamente. Dovete essere in grado di generare tutti i post in modo statico. Questo può essere fatto utilizzando la funzione generateStaticParams.
La funzione viene utilizzata in combinazione con i segmenti di percorso dinamico per generare staticamente i percorsi al momento della creazione invece che on-demand al momento della richiesta. Durante la creazione, generateStaticParams viene eseguito prima che vengano generati i layout o le pagine corrispondenti.
In [postID]/page.js, usate la funzione generateStaticParams per ottenere tutti i percorsi dei post:
export async function generateStaticParams() {
const response = await fetch(
`${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}/posts`
);
const posts = await response.json();
return posts.map((post) => ({
postId: post.id.toString(),
}));
}Quando eseguite il comando di build, il vostro progetto Next.js genererà una cartella out con i file statici.
Distribuire Next.js sull’hosting statico di Kinsta
Inviate il codice al vostro provider Git preferito (Bitbucket, GitHub o GitLab). Quindi, seguite questi passaggi per distribuire il vostro sito statico Next.js su Kinsta:
- Accedete o create un account per visualizzare la dashboard MyKinsta.
- Autorizzate Kinsta con il vostro provider Git.
- Cliccate su Siti statici nella barra laterale di sinistra e poi su Aggiungi sito.
- Selezionate il repository e il branch da cui desiderate effettuare il deploy.
- Assegnate un nome unico al vostro sito.
- Aggiungete le impostazioni di build nel seguente formato:
- Comando di build:
npm run build - Versione Node:
18.16.0 - Directory di pubblicazione:
out
- Comando di build:
- Infine, cliccate su Crea sito.
E il gioco è fatto! In pochi secondi avrete un sito distribuito. Viene fornito un link per accedere alla versione distribuita del vostro sito. In seguito potrete aggiungere il vostro dominio personale e il vostro certificato SSL.
In alternativa all’Hosting di Siti Statici, potete scegliere di distribuire il vostro sito statico con il servizio di Hosting di Applicazioni di Kinsta, che offre una maggiore flessibilità di hosting, una gamma più ampia di vantaggi e l’accesso a funzionalità più robuste, come lo scaling, la distribuzione personalizzata tramite un file Docker e analisi complete che comprendono dati storici e in tempo reale. Inoltre, non è necessario configurare il progetto Next.js per il rendering statico.
Riepilogo
In questo articolo avete imparato a sfruttare WordPress headless in un progetto Next.js per recuperare e visualizzare i post in modo dinamico. Questo approccio consente di integrare perfettamente i contenuti di WordPress nelle applicazioni Next.js, offrendo un’esperienza web moderna e dinamica.
Il potenziale dell’API del CMS headless va oltre i semplici post: permette di recuperare e gestire pagine, commenti, media e altro ancora.
Ospitare il vostro CMS WordPress insieme ai vostri framework frontend non deve essere necessariamente una seccatura. Con il cruscotto MyKinsta di Kinsta, vi viene offerta una piattaforma unificata per gestire con facilità siti web WordPress, applicazioni, database e siti statici.
Lascia un commento