Lors de la construction d’un site de blog dynamique, il est courant de récupérer des données depuis une source de contenu, comme un CMS (Système de Gestion de Contenu) comme WordPress.

Récemment, j’ai eu à me faire face au défi d’intégrer WordPress à mon projet existant Next.js. J’hébergeais un blog sur WordPress et j’ai voulu le migrer vers mon application Next.js.

J’ai besoin d’une solution qui me permettrait d’utiliser WordPress en tant que CMS hébergé. L’objectif était simple : utiliser l’avantage de WordPress pour gérer le contenu en utilisant une structure de frontend moderne pour l’afficher.

Dans cet article, nous passerons en revue la manière de fusionner WordPress dans une application Next JS.

Pourquoi Utiliser un CMS Hébergé ?

Un CMS hébergé sépare la gestion du contenu (back-end) de la couche de présentation (front-end). Cela offre aux développeurs plus de flexibilité sur la manière dont le contenu est fourni et affiché, sans être limités par des thèmes ou des mises en page traditionnelles.

C’est excellent pour les performances et la scalabilité, offrant plus de contrôle sur la manière dont le contenu est rendu sur le frontend. Dans ce cas, vous utiliserez WordPress comme système de gestion de contenu mais afficherez le contenu d’une manière plus moderne et performante en utilisant Next.js.

Qu’est-ce que Next.js ?

Si vous n’avez jamais entendu parler de Next.js, c’est un puissant framework basé sur React qui rend la construction d’applications optimisées, avec un rendu serveur (SSR), beaucoup plus simple.

Il offre une série de fonctionnalités de base telles que les routages basés sur les fichiers, les routes API, la génération statique de sites (SSG) et la régénération statique incrémentielle (ISR). toutes ces caractéristiques en font un excellent choix pour la création de sites web rapides et optimisés pour le SEO.

Comment connecter WordPress et Next.js

Lors de l’utilisation de WordPress en tant que CMS sans interface, il existe deux méthodes primaires pour connecter votre application Next.js à votre backend WordPress :

  1. API REST de WordPress : WordPress est fourni avec une API REST intégrée, qui vous permet de récupérer le contenu de WordPress au format JSON.

  2. WPGraphQL : WordPress prend en charge la gestion de contenu sans interface par l’utilisation de GraphQL (avec des plugins tels que WPGraphQL), ce qui facilite la recherche et la récupération de contenu spécifique, comme des articles de blog, pour une utilisation dans un framework front-end comme React.

Bien que l’API REST soit populaire, nous allons choisir WPGraphQL parce qu’il permet des requêtes plus précises et de plus grande flexibilité. Avec GraphQL, vous pouvez demander exactement les données dont vous avez besoin, ce qui peut réduire le volume de données transférées et améliorer les performances.

Étapes pour connecter WordPress et Next.js en utilisant WPGraphQL

La première chose que vous devez faire est d’installer le plugin WPGraphQL sur votre site WordPress. Ce plugin permet de fonctionner avec l’API GraphQL dans WordPress. Vous pouvez installer le plugin de la même manière que n’importe lequel d’autres en naviguant vers le tableau de bord administrateur de WordPress.

Tout d’abord, allez à Plugins et sélectionnez Ajouter nouveau. Ensuite, recherchez WPGraphQL et une fois qu’il est trouvé, installez-le et activez simplement le plugin.

Après l’installation et l’activation du plugin, l’IDE GraphQL apparaîtra sur le tableau de bord WordPress. Ici, vous pouvez tester diverses requêtes que vous pourriez avoir besoin pour votre développement front-end.

Passons à l’interface utilisateur.

Comment récupérer des données de WPGraphQL dans Next.js

Dans votre projet Next.js, vous devrez récupérer des données de l’API GraphQL. Voici un exemple simple en utilisant graphql-request :

1. Installez graphql-request pour faciliter la récupération de requêtes GraphQL :

npm install graphql-request

2. Dans votre composant Next.js, créez une requête GraphQL pour récupérer les billets de 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

Dans le code ci-dessus, votre application Next.js récupère les billets de blog de votre backend WordPress en utilisant GraphQL et les affiche sur l’interface utilisateur. La requête GraphQL est créée pour récupérer les détails de billet tels que le titre, l’auteur, le contenu et l’image de featuring.

En utilisant Next.js getStaticProps, les données sont récupérées au moment de la construction et passées en props au composant. Les billets de blog sont affichés à travers des composants personnalisés tels que BlogHeader, BlogPosts et BlogNewsletter, ce qui rend la page dynamique et efficiente.

Ceci démontre comment WordPress peut être utilisé comme CMS à nu pour une application Next.js. Maintenant que vous avez intégré WordPress comme CMS à nu avec succès dans votre application Next.js, vous pouvez continuer à récupérer plus de données à partir de l’API GraphQL pour améliorer les fonctionnalités de votre application.

Conclusion

En utilisant WordPress comme CMS à nu et Next.js pour l’interface utilisateur, nous pouvons construire un blog rapide et performant en SEO tout en profitant des puissantes fonctionnalités de gestion de contenu de WordPress.

L’utilisation de WPGraphQL nous a permis de récupérer efficacement uniquement les données nécessaires, ce qui nous a donné plus de contrôle et amélioré les performances du site.

J’espère que cela a été utile. Bon coding !