{"id":76890,"date":"2024-03-04T09:08:01","date_gmt":"2024-03-04T08:08:01","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=76890&preview=true&preview_id=76890"},"modified":"2024-03-05T15:24:12","modified_gmt":"2024-03-05T14:24:12","slug":"wordpress-headless-next-js","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/wordpress-headless-next-js\/","title":{"rendered":"Come utilizzare WordPress come CMS headless per Next.js"},"content":{"rendered":"

WordPress esiste da oltre 20 anni e, secondo W3Techs<\/a>, 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.<\/p>\n

Oggi sono disponibili molti linguaggi di programmazione e framework per costruire siti web facili da usare e ad alte prestazioni che sono molto pi\u00f9 veloci di WordPress, a prescindere dalle ottimizzazioni effettuate nella bacheca di WordPress. Un esempio \u00e8 Next.js<\/a>, un popolare framework React.<\/p>\n

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<\/a> sul servizio gratuito di Hosting di Siti Statici<\/a> di Kinsta.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Come funziona WordPress Headless<\/h2>\n

Per WordPress headless si intende l’utilizzo di WordPress solo per le sue funzionalit\u00e0 di backend (gestione e archiviazione dei contenuti) e l’utilizzo di un sistema separato, come Next.js, per la presentazione del frontend.<\/p>\n

Questo disaccoppiamento consente agli sviluppatori di utilizzare i solidi strumenti di gestione dei contenuti di WordPress e di sfruttare appieno le moderne funzionalit\u00e0 di sviluppo frontend, come il rendering lato server e la generazione di siti statici in Next.js.<\/p>\n

Preparare il sito WordPress<\/h3>\n

Prima di immergerci nello sviluppo di Next.js, il vostro sito WordPress avr\u00e0 bisogno di un po’ di preparazione per essere utilizzato come CMS headless<\/a>.<\/p>\n

Se non avete gi\u00e0 un sito WordPress, potete crearlo facilmente con Kinsta. Esistono tre metodi per creare un sito WordPress con Kinsta:<\/p>\n

    \n
  1. Creare un sito sul vostro computer locale<\/a> (magari utilizzando i nostri strumenti DevKinsta<\/a>) prima di spostare il sito sui nostri server<\/li>\n
  2. Creare un sito in remoto utilizzando la dashboard MyKinsta<\/a><\/li>\n
  3. Creare un sito in remoto utilizzando l’API di Kinsta<\/a><\/li>\n<\/ol>\n

    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<\/a>.<\/p>\n

    L’API REST facilita il recupero dei dati in formato JSON utilizzando approcci JavaScript come Fetch API<\/a> o la libreria Axios<\/a>. L’API REST \u00e8 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, \u00e8 necessario installare il plugin WPGraphQL.<\/p>\n

    In questa guida utilizzeremo l’API REST. Per ottenere i dati di WordPress in formato JSON, aggiungete \/wp-json\/wp\/v2<\/code> all’URL del vostro sito WordPress:<\/p>\n

    http:\/\/yoursite.com\/wp-json\/wp\/v2<\/code><\/pre>\n
    Se l’API JSON non \u00e8 abilitata per impostazione predefinita quando visitate http:\/\/yoursite.com\/wp-json<\/code>, potete abilitarla aprendo Permalink<\/strong> sotto Impostazioni<\/strong> nella bacheca di WordPress e selezionando Nome del post<\/strong> o qualsiasi altra opzione a vostra scelta, tranne Semplice<\/strong>:<\/p>\n
    \"Configurare
    Configurare l’API REST di WordPress per accedere ai dati JSON.<\/figcaption><\/figure>\n
    Funziona per i siti WordPress locali e pubblici e offre endpoint<\/a> per i contenuti che includono post<\/a>, pagine<\/a>, commenti<\/a> e media<\/a>. Leggete la nostra guida completa alle API REST<\/a> per saperne di pi\u00f9.<\/p>\n
    Configurare l’ambiente Next.js<\/h2>\n
    Next.js aiuta gli sviluppatori a creare applicazioni web con facilit\u00e0, migliorando le prestazioni e ottimizzando l’esperienza di sviluppo. Una delle sue caratteristiche principali \u00e8 il routing basato su file, che semplifica la creazione di percorsi.<\/p>\n
    Next.js si concentra anche sulle prestazioni, offrendo funzioni come lo splitting automatico del codice<\/a>, che carica solo il JavaScript necessario per ogni pagina, riducendo in modo significativo il tempo di caricamento.<\/p>\n
    Per configurare un progetto Next.js, potete eseguire il seguente comando e utilizzare le risposte predefinite:<\/p>\n
    npx create-next-app@latest nextjs-wp-demo<\/code><\/pre>\n
    Per questa guida, potete prendere il nostro template di avvio Git<\/a> seguendo questi passi:<\/p>\n
      \n
    1. Visitate il repository GitHub<\/a> di questo progetto.<\/li>\n
    2. Seleziona Use this template<\/strong> > Create a new repository<\/strong> per copiare il codice di partenza in un repository all’interno del vostro account GitHub (selezionate la casella per includere tutti i branch<\/strong>).<\/li>\n
    3. Estraete il repository sul vostro computer locale e passate al branch starter-files<\/a> usando il comando: git checkout starter-files<\/code>.<\/li>\n<\/ol>\n
        \n
      1. Installate le dipendenze necessarie eseguendo il comando npm install<\/code>.<\/li>\n<\/ol>\n
        Una volta completata l’installazione, lanciate il progetto sul vostro computer locale con npm run dev<\/code>. In questo modo il progetto sar\u00e0 disponibile all’indirizzo http:\/\/localhost:3000\/<\/a>.<\/p>\n
        \"La
        La schermata di un progetto di avvio costruito con Next.js.<\/figcaption><\/figure>\n
        Il progetto<\/h3>\n
        L’App Router \u00e8 stato introdotto in Next.js 13, sostituendo la directory pages<\/strong> esistente per il routing. Il routing con l’App Router comporta anche la creazione di cartelle all’interno della cartella app<\/strong>. Poi, annida un file page.js<\/strong> all’interno della cartella appropriata per definire il vostro percorso.<\/p>\n
        In questo progetto, app<\/strong> \u00e8 la cartella principale con cui interagire e troverete la seguente struttura di file.<\/p>\n
        \/\n|-- \/app\n    |-- \/blog\n        |-- \/[postId]\n        \t|-- page.js\n        |-- page.js\n    |-- globals.css\n    |-- layout.js\n    |-- navbar.js\n    |-- page.js<\/code><\/pre>\n
        Vengono 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<\/strong>) per il rendering dei singoli post.<\/p>\n
        Noterete anche il componente navbar.js<\/strong>, che viene importato nel file layout.js<\/strong> per creare un layout per il progetto.<\/p>\n
        Recuperare i dati da WordPress a Next.js<\/h2>\n
        Con l’API REST di WordPress, potete recuperare post, pagine e tipi di post personalizzati inviando richieste HTTP a endpoint specifici.<\/p>\n
        Facciamo una richiesta di fetch nel file blog\/page.js<\/strong> 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<\/strong> in base al parametro id<\/code> passato.<\/p>\n
        Prima di effettuare queste richieste, \u00e8 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\u00f9 file.<\/p>\n
        Create un file .env<\/strong> nella root del vostro progetto Next.js e aggiungete quanto segue:<\/p>\n
        NEXT_PUBLIC_WORDPRESS_API_URL=https:\/\/yoursite.kinsta.cloud\/wp-json\/wp\/v2<\/code><\/pre>\n
        Assicuratevi di sostituire l’URL con l’API JSON del vostro sito. Inoltre, aggiungete .env<\/code> al vostro file .gitignore<\/a><\/strong> in modo da non inviare il file al vostro provider Git.<\/p>\n
        Recuperare tutti i post da WordPress a Next.js<\/h3>\n
        Per recuperare tutti i post dal vostro sito WordPress, create una funzione asincrona chiamata getPosts<\/code> nel vostro file blog\/page.js<\/strong>. Questa funzione utilizza l’API Fetch per effettuare una richiesta GET all’endpoint \/posts<\/code> dell’API REST di WordPress.<\/p>\n
        async function getPosts() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n    return posts;\n}<\/code><\/pre>\n
        Una volta ricevuta la risposta, la converte in JSON e crea un array di oggetti post. Questi posts<\/code> possono essere resi nella vostra applicazione Next.js, fornendo un elenco dinamico di post del blog prelevati direttamente da WordPress.<\/p>\n
        const BlogPage = async () => {\n    const posts = await getPosts();\n    return (\n        <div className=\"blog-page\">\n            <h2>All Blog Posts<\/h2>\n            <p>All blog posts are fetched from WordPress via the WP REST API.<\/p>\n            <div className=\"posts\">\n                {posts.map((post) => {\n                    return (\n                        <Link href={`\/blog\/${post.id}`} className=\"post\" key={post.id}>\n                            <h3>{post.title.rendered}<\/h3>\n                            <p\n                                dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}\n                            ><\/p>\n                        <\/Link>\n                    );\n                })}\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        All’interno del componente pagina di Next.js, chiamate getPosts<\/code> in modo asincrono per recuperare i post. Poi, passate map<\/code> sopra l’array di posts<\/code>, rendendo title<\/code> e excerpt<\/code> di ogni post all’interno di un componente <Link><\/code>.<\/p>\n
        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 \u00e8 ottenuto utilizzando il routing basato su file di Next.js, dove l’ID del post viene utilizzato per generare dinamicamente il percorso dell’URL.<\/p>\n
        Recuperare i post dinamici da WordPress a Next.js<\/h3>\n
        Nel codice qui sopra, ogni post \u00e8 racchiuso in un link che dovrebbe aiutare gli utenti a navigare verso una vista dettagliata del post.<\/p>\n
        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<\/strong> \u00e8 gi\u00e0 stata creata nel codice di stater-files.<\/p>\n
        Create una funzione getSinglePost<\/code>, simile a getPosts<\/code>, per recuperare un singolo post utilizzando l’ID del post passato come parametro.<\/p>\n
        async function getSinglePost(postId) {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts\/${postId}`\n    );\n    const post = await response.json();\n    return post;\n}<\/code><\/pre>\n
        Nel componente della pagina dinamica, estraete l’ID del post dai parametri dell’URL, chiamate getSinglePost<\/code> con questo ID e renderizzate il contenuto del post.<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    \/\/ ... the rest of the page code\n};<\/code><\/pre>\n
        Potete quindi riempire la pagina con i dati recuperati:<\/p>\n
        const page = async ({ params }) => {\n    const post = await getSinglePost(params.postId);\n    if (!post) {\n        return <div>Loading...<\/div>;\n    }\n    return (\n        <div className=\"single-blog-page\">\n            <h2>{post.title.rendered}<\/h2>\n            <div className=\"blog-post\">\n                <p> dangerouslySetInnerHTML={{ __html: post.content.rendered }}><\/p>\n            <\/div>\n        <\/div>\n    );\n};<\/code><\/pre>\n
        Potete accedere al codice completo sul nostro repository GitHub<\/a>.<\/p>\n
        Distribuire l’applicazione Next.js su Kinsta gratuitamente<\/h2>\n
        Il servizio di Hosting di Siti Statici<\/a> di Kinsta offre la possibilit\u00e0 di ospitare gratis<\/strong> fino a 100 siti statici.<\/p>\n
        Questo servizio ospita solo file statici. Se utilizzate un generatore di siti statici<\/a> come Next.js, potete configurare le opzioni per creare il vostro progetto da GitHub e distribuire i file statici su Kinsta.<\/p>\n
        Rendering statico in Next.js<\/h3>\n
        Per abilitare l’esportazione statica in Next.js versione 13 o superiore, modificate la modalit\u00e0 output<\/code> all’interno di next.config.js<\/strong>:<\/p>\n
        const nextConfig = {\n    output: 'export',\n};<\/code><\/pre>\n
        Ora, quando costruite il vostro progetto, Next.js dovrebbe produrre una cartella out<\/strong> che contiene le risorse HTML<\/a>, CSS<\/a> e JavaScript<\/a> dell’applicazione.<\/p>\n
        Dalla versione 13, Next.js supporta l’avvio come sito statico e il successivo aggiornamento opzionale per l’utilizzo di funzionalit\u00e0 che richiedono un server. Quando utilizzate le funzionalit\u00e0 del server, la creazione delle pagine non generer\u00e0 pagine statiche.<\/p>\n
        Ad esempio, nel percorso dinamico, i dati vengono recuperati dinamicamente. Dovete essere in grado di generare tutti i post in modo statico. Questo pu\u00f2 essere fatto utilizzando la funzione generateStaticParams<\/code>.<\/p>\n
        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<\/code> viene eseguito prima che vengano generati i layout o le pagine corrispondenti.<\/p>\n
        In [postID]\/page.js<\/strong>, usate la funzione generateStaticParams<\/code> per ottenere tutti i percorsi dei post:<\/p>\n
        export async function generateStaticParams() {\n    const response = await fetch(\n        `${process.env.NEXT_PUBLIC_WORDPRESS_API_URL}\/posts`\n    );\n    const posts = await response.json();\n\n    return posts.map((post) => ({\n        postId: post.id.toString(),\n    }));\n}<\/code><\/pre>\n
        Quando eseguite il comando di build, il vostro progetto Next.js generer\u00e0 una cartella out<\/strong> con i file statici.<\/p>\n
        Distribuire Next.js sull’hosting statico di Kinsta<\/h3>\n
        Inviate il codice al vostro provider Git preferito (Bitbucket<\/a>, GitHub<\/a> o GitLab<\/a>). Quindi, seguite questi passaggi per distribuire il vostro sito statico Next.js su Kinsta:<\/p>\n
          \n
        1. Accedete o create un account per visualizzare la dashboard MyKinsta<\/a>.<\/li>\n
        2. Autorizzate Kinsta con il vostro provider Git.<\/li>\n
        3. Cliccate su Siti statici<\/strong> nella barra laterale di sinistra e poi su Aggiungi sito<\/strong>.<\/li>\n
        4. Selezionate il repository e il branch da cui desiderate effettuare il deploy.<\/li>\n
        5. Assegnate un nome unico al vostro sito.<\/li>\n
        6. Aggiungete le impostazioni di build nel seguente formato:\n