Quando si costruisce un sito web di blog dinamico, è comune recuperare dati da una sorgente di contenuti, come un CMS (Content Management System) come WordPress.

Recentemente, mi sono trovato di fronte alla sfida di integrare WordPress nel mio progetto esistente Next.js. Avevo un blog ospitato su WordPress e volevo migrare tutto su applicazione Next.js.

Avevo bisogno di una soluzione che mi permettesse di utilizzare WordPress come un CMS headless. L’obiettivo era semplice: sfruttare il potere di WordPress per la gestione del contenuto mentre utilizzare una moderna piattaforma frontend per la sua visualizzazione.

In questo articolo, vi guiderò attraverso come integrare WordPress in una applicazione Next JS.

Perché Utilizzare un CMS Headless?

Un CMS headless separa la gestione del contenuto (back-end) dalla piattaforma di presentazione (front-end). Ciò offre ai sviluppatori maggiore flessibilità su come il contenuto sia distribuito e visualizzato, senza essere limitati da temi o layout tradizionali.

È ideale per la performance e la scalabilità, offrendo un maggior controllo su come il contenuto è renderizzato sul frontend. In questo caso, userai WordPress come il tuo sistema di gestione del contenuto ma visualizzerai il contenuto in un modo più moderno e performante utilizzando Next.js.

Cos’è Next.js?

Se non hai ancora sentito parlare di Next.js, è un potente framework basato su React che rende molto semplice la creazione di applicazioni ottimizzate, renderizzate sul server (SSR).

Offre molte caratteristiche di default come la routing basata su file, le API route, la generazione statica del sito (SSG) e la rigenerazione statica incrementale (ISR). Tutte queste caratteristiche lo rendono un ottimo scelto per la creazione di siti web veloci e adatti all’SEO.

Come connettere WordPress e Next.js

Quando si utilizza WordPress come CMS headless, ci sono due modi principali per connettere la tua applicazione Next.js al backend WordPress:

  1. WP REST API: WordPress include una REST API integrata, che consente di recuperare contenuti da WordPress in formato JSON.

  2. WPGraphQL: WordPress supporta la gestione dei contenuti headless attraverso l’uso di GraphQL (con plugin come WPGraphQL), rendendo semplice la query e il recupero di contenuti specifici, come articoli di blog, da utilizzare in un framework front-end come React.

Sebbene l’API REST sia popolare, sceglieremo WPGraphQL perché consente query più precise e flessibili. Con GraphQL, puoi richiedere esattamente i dati di cui hai bisogno, il che può ridurre la quantità di dati trasferiti e migliorare le prestazioni.

Passi per connettere WordPress e Next.js usando WPGraphQL

La prima cosa da fare è installare il plugin WPGraphQL sul tuo sito WordPress. Questo plugin consente la funzionalità dell’API GraphQL all’interno di WordPress. È possibile installare il plugin come qualsiasi altro, navigando alla dashboard dell’amministratore di WordPress.

Prima di tutto, vai a Plugins e seleziona Add New. Poi, cerca WPGraphQL e una volta che lo trovi, installa e attiva semplicemente il plugin.

Dopo aver installato e attivato il plugin, l’IDE GraphQL apparirà nella dashboard di WordPress. qui, puoi testare varie query che potresti aver bisogno per il tuo sviluppo frontend.

Adesso passiamo al frontend.

Come recuperare dati da WPGraphQL in Next.js

Nel tuo progetto Next.js, dovrai recuperare dati dall’API GraphQL. Ecco un semplice esempio utilizzando graphql-request:

1. Installare graphql-request per facilitare la query dell’API GraphQL:

npm install graphql-request

2. Nel tuo componente Next.js, crea una query GraphQL per recuperare i post del blog:

import BlogHeader from '@/components/blog/BlogHeader';
import BlogNewsletter from '@/components/blog/BlogNewsletter';
import BlogPosts from '@/components/blog/BlogPosts';
import Link from 'next/link';
import React from 'react';

import { request, gql } from "graphql-request";

const query = gql`
{
  posts(first: 10) {
    edges {
      node {
        id
        title
        excerpt
        content
        date
        author {
          node {
            id
            name            
          }
        }
        date
        slug
        featuredImage {
          node {
            sourceUrl
          }
        }
        categories {
          edges {
            node {
              name
            }
          }
        }
      }
    }
  }
}
`

export async function getStaticProps() {
  try {
    const posts: any = await request('https://blog.intercity.ng/graphql', query);

    return {
      props: { posts }
    }
  } catch (error) {
    console.error('Error fetching posts:', error);
    return {
      props: {
        posts: []
      }
    };
  }
}

const Index = ({ posts }: { posts: any }) => {

  return (
    <main className="relative pb-10 pt-10 lg:pt-0 lg:mt-[-3%]">
      <div className='t40-container w-full'>
        <BlogHeader />
        <BlogPosts posts={posts} />
        <BlogNewsletter />
      </div>
    </main>
  )
}

export default Index

Nel codice sopra, il tuo sito Next.js recupera i post del blog dalla base di dati di WordPress in background utilizzando GraphQL e li mostra sul frontend. La query GraphQL è creata per recuperare dettagli del post come il titolo, l’autore, il contenuto e l’immagine in evidenza.

Utilizzando Next.js getStaticProps, i dati vengono recuperati durante la fase di build e passati come props al componente. I post del blog vengono visualizzati attraverso componenti personalizzate come BlogHeader, BlogPosts e BlogNewsletter, rendendo la pagina dinamica ed efficiente.

Questo dimostra come WordPress possa essere utilizzato come un CMS senza testa per un’applicazione Next.js. Ora che hai integrato con successo WordPress come un CMS senza testa nella tua applicazione Next.js, puoi continuare a recuperare più dati dall’API GraphQL per migliorare la funzionalità della tua app.

Conclusione

Utilizzando WordPress come CMS senza testa e Next.js per il frontend, possiamo costruire un blog veloce e ottimizzato per i motori di ricerca sfruttando le potenti funzionalità di gestione dei contenuti di WordPress.

Utilizzando WPGraphQL siamo stati in grado di recuperare efficientemente solo i dati di cui avevamo bisogno, garantendoci maggiore controllo e migliorando le prestazioni del sito.

Spero che sia stato utile. Buon coding!