Comment gérer efficacement le contenu de votre site web avec NextJs et Hygraph

Tout d’abord qu’est-ce que Hygraph ?

Hygraph est un CMS "headless" (Content Management System), c’est-à-dire un gestionnaire de contenu dépourvu de toute partie liée au layout ou aux thèmes, contrairement à WordPress. Il n’est pas attaché à un framework ou un langage de programmation particulier, ce qui signifie qu’il peut être utilisé pour gérer le contenu avec n’importe quel framework et n’importe quel langage de programmation.

Il propose une API GraphQL très flexible qui permet d’intégrer facilement le contenu dans votre framework préféré.

En plus de vous permettre de gérer tout le contenu texte et les médias de votre site internet, Hygraph offre également la possibilité de gérer du contenu multilingue (2 langues sont prises en charge dans le plan gratuit).

L’un des principaux avantages de combiner un CMS comme Hygraph avec un framework est que le développeur garde un contrôle total sur la personnalisation du site, tout en permettant à des non-développeurs d’éditer le contenu sans avoir à manipuler du code.

Les étapes pour intégrer du contenu dans NextJs avec Hygraph

Voici les étapes importantes pour intégrer du contenu depuis Hygraph dans un projet Next.js :

1. Modéliser le contenu : comme pour une base de données relationnelle où l’on définit le schéma de la base, les “tables” et leurs relations, Hygraph fonctionne de manière similaire. Vous définissez le schéma du contenu de votre site, créez les modèles, et établissez les relations entre eux.

2. Créer le contenu : à cette étape, vous enregistrez votre contenu en fonction des modèles que vous avez définis précédemment.

3. Définir la ou les requêtes GraphQL pour récupérer notre contenu : Hygraph met à disposition un playground avec des requêtes par défaut basées sur les modèles que vous avez créés. Vous pouvez les personnaliser pour récupérer exactement les données souhaitées.

4. Consommer le contenu dans notre application NextJs : selon la stratégie de rendu adoptée dans le projet (SSR, SSG ou CSR), les configurations peuvent légèrement varier. Cependant, l'idée reste la même : écrire la requête pour récupérer le contenu, puis l'afficher dans votre application.

Voyons concrètement comment se passent ces étapes.

1. Modéliser le contenu

Comme pour une modélisation de base de données relationnelle, nous commençons par une schématisation du contenu dans Hygraph. Prenons l’exemple d’une landing page avec une navbar, des sections, et un footer, comme illustré ci-dessous.

Pour une telle landing-page le schéma Hygraph ressemblera à ceci :

• En vert, les modèles.

• En bleu, les composants.

• En violet, la zone dynamique.

Un model représente la structure d’une "table", comme dans une base de données relationnelle. Pour chaque modèle, on définit tous les champs ou colonnes qui le composent.

L’image suivante montre une liste non exhaustive des types de champs que vous pouvez ajouter à vos modèles sur Hygraph.

Un composant est un modèle spécial qui utilise un ou plusieurs autres modèles comme type de contenu. On peut voir un composant comme une table avec des clés étrangères provenant d’autres tables. Dans notre cas, un exemple de composant serait la Navbar, qui est composée d’un logo et de liens, chacun ayant son propre modèle dans notre schéma.

Une zone dynamique est un type de modèle qui peut regrouper plusieurs composants. Cela permet d’éviter la duplication de contenu et de référencer du contenu déjà créé.

2. Créer le contenu

À cette étape on ajoutera du contenu à partir des models que nous avonscréer.

À noter : Supprimer un modèle nécessite d’abord de supprimer tout contenu associé à ce modèle. De même, pour ajouter un champ à un modèle, il faut d'abord ajouter ce champ dans la définition du modèle avant de pouvoir l’utiliser dans le contenu.

3. Définir les requêtes GraphQL

Hygraph propose un playground permettant de construire et tester vos requêtes GraphQL. Vous pouvez ajouter les attributs que vous souhaitez récupérer, tester la requête et l’ajuster selon vos besoins.

4. Consommer Hygraph dans NextJs

Imaginons que nous travaillons sur un site Next.js où nous souhaitons du contenu statique. La génération de site statique (SSG) est une approche idéale pour ce cas d’utilisation.

Pour consommer le contenu, voici quelques étapes cruciales à suivre :

1ère étape : Configurer l’environnement pour accéder à Hygraph et effectuer les appels API.

Pour cela, nous devons tout d’abord accorder les permissions pour pouvoir récupérer le contenu. Dans le cas d’espèce on accordera les droits en lecture à tout les models.

Ensuite nous pouvons copier l’URL pour accéder à notre contenu sur Hygraph dans la section Endpoints.

2ème étape : Ajouter l’URL dans notre projet Next.js dans une constante ou dans une variable d’environnement.

3ème étape : ajouter notre requête GraphQL dans un service que nous pourrons appeler ensuite. Pour cela, nous allons installer Apollo, une librairie qui nous permet de gérer les requêtes GraphQL.

Exécutons la commande suivante :

yarn add @apollo/client

Ensuite, créons un nouveau service dans notre projet: /services/hygraph-client.ts

import { ApolloClient, InMemoryCache, gql } from '@apollo/client'

const client = new ApolloClient({
  uri: hygraph_endpoint, // importer l'endpoint
  cache: new InMemoryCache(),
});

export const getHomePage = async () => {
    const query = gql`
      query getHomePage {
       navbar {
            link {
              href
              label
              elementType
            }
            logo {
              href
              image {
                fileName
              }
            }
          }
      }
    `;

  const response = client.query(query);
  return response;
}

4ème étape : appeler getHomePage() dans la page ou on souhaite afficher notre contenu à l’intérieur de la methode getStaticProps() pour s’assurer que ces données soient chargées avant que notre page soit générée de façon statique.

On fera donc :

export const getStaticProps = async () => {
  const { navbar } = await getHomePage();

  return {
    props: {
      navbar,
    },
  };
};

export default function Home({ navbar }) {
  const navbarProps = navbar // facultatif
  return (
    <div className="block">
      <Navbar props={navbarProps} />
       {/* les autres composants */}
    </div>
  );
}

Et voilà 🎉