Créez un blog dans Next.js avec Headless Oracle Content Management

Introduction

Next.js est une structure Web de développement frontal React open source qui active des fonctionnalités telles que le rendu côté serveur et la génération de sites Web statiques pour les applications Web basées sur React. Mais que se passe-t-il lorsque vous avez besoin d'un système de gestion de contenu pour servir l'ensemble de votre contenu ? Heureusement, Oracle Content Management, avec ses puissantes fonctionnalités de gestion de contenu sans tête, propose une solution adaptée à vos besoins en matière d'administration de contenu et de gouvernance.

Dans ce tutoriel, nous allons créer un blog simple dans Next.js en utilisant Oracle Content Management comme un CMS sans tête, ainsi que son kit de développement logiciel (SDK) pour la diffusion de contenu dans JavaScript. Cet exemple Next.js est disponible sur GitHub.

Ce tutoriel se compose de trois tâches :

1. Préparer Oracle Content Management
2. Créez le blog dans Next.js
3. Préparer votre application au déploiement

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

• Principaux concepts
• Référentiels de ressources

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• un abonnement Oracle Content Management
• un compte Oracle Content Management avec le rôle Administrateur de contenu
• un ordinateur Windows ou Mac avec une version de noeud 10 ou supérieure

Ce que nous construisons

Notre blog sera composé d'un site de trois pages qui permet aux visiteurs d'explorer des articles de blog organisés en rubriques. La première page, la page d'accueil, se compose de la marque (nom et logo de la société), de certains liens et d'une liste de sujets de blog.

Pour voir ce que nous construisons, voici l'état de fin de notre tutoriel, un blog de base Next.js qui consomme du contenu d'Oracle Content Management :

https://headless.mycontentdemo.com/samples/oce-nextjs-blog-sample

Voici à quoi ressemblera la page d'accueil à la fin de ce tutoriel :

La deuxième page, topic page, affiche des aperçus de chaque article de blog appartenant à la rubrique. Voici l'aspect d'une page de rubrique individuelle :

Enfin, la page de l'article affiche l'article de blog final, y compris des informations sur l'auteur du blog. Voici l'aspect d'une page d'article individuelle :

Pour continuer, vous devez disposer d'un abonnement actif à Oracle Content Management et être connecté avec le rôle d'administrateur de contenu.

Tâche 1 : Préparer Oracle Content Management

Si vous ne disposez pas encore d'une instance Oracle Content Management, reportez-vous à Démarrage rapide pour apprendre à vous inscrire à Oracle Cloud, à provisionner une instance Oracle Content Management et à configurer Oracle Content Management en tant que système de gestion de contenu sans tête.

Pour ce tutoriel, vous devez créer un modèle de contenu de deux façons. Un pack de ressources téléchargeable est disponible pour remplir le référentiel vide avec les types de contenu et le contenu associé, ou vous pouvez créer votre propre modèle de contenu et votre propre contenu.

Pour préparer Oracle Content Management :

1. Créez un canal et un référentiel de ressources.
2. Créez un modèle de contenu à l'aide de l'une des deux méthodes suivantes :
   • Méthode 1 : Importer le pack d'échantillons Oracle Content Management
   • Méthode 2 : Créer votre propre modèle de contenu

Création d'un canal et d'un référentiel de ressources

Vous devez d'abord créer un canal et un référentiel de ressources dans Oracle Content Management afin de pouvoir publier du contenu.

Pour créer un canal et un référentiel de ressources dans Oracle Content Management, procédez comme suit :

1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

2. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Publier des canaux dans la liste de sélection de l'en-tête de page.

   

3. Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEGettingStartedChannel' dans le cadre de ce tutoriel et conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.

   

4. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page.

   

5. Dans l'angle supérieur droit, cliquez sur Créer pour créer un référentiel de ressources. Nommez le référentiel de ressources 'OCEGettingStartedRepository' dans le cadre de ce tutoriel.

   

6. Dans le champ Canaux de publication, sélectionnez le canal OCEGettingStartedChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEGettingStartedRepository peut être publié dans le canal OCEGettingStartedChannel. Cliquez sur Enregistrer lorsque vous avez terminé.

   

Créer un modèle de contenu

La tâche suivante consiste à créer un modèle de contenu. Vous pouvez utiliser l'une des deux méthodes :

• Méthode 1 : Importer le pack d'échantillons Oracle Content Management
• Méthode 2 : Créer votre propre modèle de contenu

Importer le pack de ressources pour les échantillons Oracle Content Management

Vous pouvez télécharger un pack de ressources échantillon Oracle Content Management préconfiguré contenant tous les types de contenu et ressources requis pour ce tutoriel. Si vous préférez, vous pouvez également créer votre propre modèle de contenu plutôt que de télécharger l'exemple de pack de ressources.

Vous pouvez télécharger une copie du contenu que nous utilisons dans ce tutoriel à partir d'Oracle Content Management Samples Asset Pack. Vous pourrez ainsi tester les types de contenu et les modifier. Si vous souhaitez importer le pack de ressources Oracle Content Management Samples Asset Pack, vous pouvez télécharger l'archive du pack de ressources, OCESamplesAssetPack.zip, puis l'extraire dans le répertoire de votre choix :

1. Téléchargez le pack d'échantillons Oracle Content Management (OCESamplesAssetPack.zip) à partir de la page Téléchargements d'Oracle Content Management. Extrayez le fichier ZIP téléchargé vers un emplacement sur votre ordinateur. Après l'extraction, cet emplacement inclut un fichier nommé OCEGettingStarted_data.zip.

2. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.

3. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Référentiels dans la liste de sélection de l'en-tête de page. A présent, sélectionnez OCEGettingStartedRepository et cliquez sur le bouton Importer le contenu dans la barre d'actions supérieure.

   

4. Téléchargez OCEGettingStarted_data.zip à partir de votre ordinateur local vers le dossier Documents.

   

5. Une fois téléchargé, sélectionnez OCEGettingStarted_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.

   

6. Une fois le contenu importé, accédez à la page Immobilisations et ouvrez le référentiel OCEGettingStartedRepository. Vous verrez que toutes les images et éléments de contenu associés ont été ajoutés au référentiel de ressources.

   

7. Cliquez sur Tout sélectionner en haut à gauche, puis sur Publier pour ajouter toutes les ressources importées au canal de publication que vous avez créé précédemment, OCEGettingStartedChannel.

   

8. Avant la publication, vous devez valider toutes les ressources. Ajoutez d'abord OCEGettingStartedChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.

   

9. Une fois les ressources validées, vous pouvez publier toutes les ressources sur le canal sélectionné en cliquant sur le bouton Publier dans l'angle supérieur droit.

   

Une fois cette opération effectuée, vous pouvez voir sur la page Immobilisations que toutes les immobilisations ont été publiées. (Cliquez sur l'icône située au-dessus du nom de la ressource.)

Après avoir importé Oracle Content Management Samples Asset Pack, vous pouvez commencer à créer le blog dans Next.js.

Créer votre propre modèle de contenu

Au lieu d'importer le pack d'échantillons Oracle Content Management, vous pouvez également créer votre propre modèle de contenu.

Pour ce tutoriel, nous utilisons un type de contenu appelé 'OCEGettingStartedHomePage' pour créer la page d'accueil de notre blog. Cette page d'accueil se compose de la marque (nom et logo de la société), d'URL pour les liens et d'une liste de sujets de blog à inclure sur la page.

Pour créer des types de contenu pour le modèle de contenu :

1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
2. Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Types d'immobilisation dans la liste de sélection de l'en-tête de page.
3. Cliquez sur Créer dans l'angle supérieur droit.
4. Choisissez de créer un type de contenu (et non un type de ressource numérique). Répétez cette opération pour tous les types de contenu requis.

Nous allons créer quatre types de contenu, chacun avec son propre ensemble de champs :

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

Le premier type de contenu, OCEGettingStartedHomePage, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Requis	Nom de la machine
Nom de la société	Champ de texte à valeur unique	X	company_name
Logo de la société	Champ de texte à valeur unique	X	company_logo
sujets	Champ de référence à valeurs multiples	X	sujets
URL du contact	Champ de texte à valeur unique	X	contact_url
A propos de l'URL	Champ de texte à valeur unique	X	about_url

Voici l'aspect de la définition de type de contenu OCEGettingStartedHomePage :

Le second type de contenu, OCEGettingStartedTopic, doit comporter le champ suivant :

Nom d'affichage	Type de champ	Requis	Nom de la machine
Miniature	Champ d'image à valeur unique	X	miniature

Voici l'apparence de votre type de contenu OCEGettingStartedTopic :

Le troisième type de contenu, OCEGettingStartedAuthor, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Requis	Nom de machine
Avatar	Champ d'image à valeur unique	X	avatar

Voici l'apparence de votre type de contenu OCEGettingStartedAuthor :

Le quatrième et dernier type de contenu, OCEGettingStartedArticle, doit comporter les champs suivants :

Nom d'affichage	Type de champ	Requis	Nom de la machine
Date de publication	Champ de date à valeur unique	X	published_name
Auteur	Champ de référence à valeur unique	X	auteur
Image	Champ d'image à valeur unique	X	image
Légende d'image	Champ de texte à valeur unique	X	image_caption
Contenu de l'article	Champ de texte de grande valeur	X	article_content
Sujet	Champ de référence à valeur unique	X	rubrique

Voici l'apparence de votre type de contenu OCEGettingStartedArticle :

Une fois les types de contenu créés, vous pouvez les ajouter au référentiel que vous avez créé précédemment, OCEGettingStartedRepository :

1. Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
2. Accédez à OCEGettingStartedRepository.
3. Modifiez le référentiel et, sous Types d'immobilisation, indiquez les quatre types de contenu nouvellement créés. Cliquez sur le bouton Enregistrer pour enregistrer vos modifications.

Après avoir ajouté les types de contenu au référentiel, vous pouvez ouvrir le référentiel OCEGettingStartedRepository sur la page Ressources et commencer à créer vos éléments de contenu pour tous les types de contenu.

Tâche 2 : créer le blog dans Next.js

Pour utiliser notre contenu Oracle Content Management dans une application Next.js côté serveur, nous pouvons utiliser l'exemple de blog Next.js, disponible en tant que référentiel open source sur GitHub.

Remarque : n'oubliez pas que l'utilisation de l'exemple Next.js est facultative et que nous l'utilisons dans ce tutoriel pour vous lancer rapidement. Vous pouvez également créer votre propre application Next.js.

Pour créer le blog dans Next.js :

1. Cloner l'exemple de référentiel et installer les dépendances
2. Configurer l'application Next.js
3. Utiliser le kit SDK Oracle Content Management Content
4. Utiliser le kit SDK de contenu pour extraire du contenu

Cloner l'exemple de référentiel et installer les dépendances

L'exemple de blog Next.js est disponible en tant que référentiel open source sur GitHub.

Vous devez d'abord cloner l'exemple à partir de GitHub sur votre ordinateur local et modifier votre répertoire en racine de référentiel :

git clone https://github.com/oracle/oce-nextjs-blog-sample.git
    cd oce-nextjs-blog-sample

Maintenant que vous disposez de votre base de code, vous devez télécharger les dépendances pour l'application. Exécutez la commande suivante à partir du répertoire racine :

npm install

Configuration de l'application Next.js

Dans cet exemple de blog Next.js, vous devez configurer quelques informations afin que votre kit SDK Oracle Content Management Content (et toute autre demande) puisse cibler l'URL d'instance et la version d'API correctes avec le jeton de canal approprié. Ces valeurs sont utilisées dans scripts/server-config-utils.js pour instancier un nouveau client de livraison.

Cette application utilise un fichier .env.local qui est lu par Next.js et mis à la disposition du code dans l'application avec process.env.

Ouvrez le fichier .env.local dans un éditeur de texte. Les informations suivantes s'affichent :

# The connection details for the Oracle Content Management server to be used for this application
    SERVER_URL=https://samples.mycontentdemo.com
    API_VERSION=v1.1
    CHANNEL_TOKEN=47c9fb78774d4485bc7090bf7b955632

Modifiez chaque paire clé-valeur pour refléter l'URL de votre instance, la version d'API à cibler et le jeton de canal associé à votre canal de publication. Le canal de ce tutoriel est OCEGettingStartedChannel.

Utiliser le kit SDK Oracle Content Management Content

Oracle Content Management propose un kit SDK pour vous aider à repérer et à utiliser du contenu dans vos applications. Le kit SDK est publié en tant que module NPM et le projet est hébergé sur GitHub.

En savoir plus sur le kit SDK ici.

Le kit SDK a été enregistré en tant que dépendance d'exécution de ce projet dans le fichier package.json.

Utiliser le kit SDK de contenu pour extraire du contenu

Nous pouvons désormais exploiter le kit SDK de contenu pour extraire du contenu afin de le rendre dans notre application Next.js.

Le dossier de scripts contient le code permettant d'obtenir des données à partir d'Oracle Content Management à l'aide du kit SDK de contenu.

Le fichier scripts/server-config-utils.js importe le kit SDK Content, puis crée un client de distribution à l'aide de la configuration indiquée dans .env.local.

La commande suivante importe le kit SDK :

import { createDeliveryClient, createPreviewClient } from '@oracle/content-management-sdk';

La commande suivante crée le client de livraison :

return createDeliveryClient(serverconfig);

Le fichier scripts/services.js contient tout le code permettant d'obtenir des données pour l'application. Il existe une fonction principale pour chaque composant de page de l'application afin d'obtenir toutes les données de cette page.

Pour le rendu des images, services.js fournit une méthode d'aide pour extraire le jeu de sources d'une ressource construite à partir des rendus de la ressource.

function getSourceSet(asset) {
      const urls = {};
      urls.srcset = '';
      urls.jpgSrcset = '';
      if (asset.fields && asset.fields.renditions) {
        asset.fields.renditions.forEach((rendition) => {
          addRendition(urls, rendition, 'jpg');
          addRendition(urls, rendition, 'webp');
        });
      }
      // add the native rendition to the srcset as well
      urls.srcset += `${asset.fields.native.links[0].href} ${asset.fields.metadata.width}w`;
      urls.native = asset.fields.native.links[0].href;
      urls.width = asset.fields.metadata.width;
      urls.height = asset.fields.metadata.height;
      return urls;
    }

Données de la page d'accueil

La page d'accueil nécessite plusieurs appels de données pour obtenir toutes ses données :

1. Nous recherchons d'abord les articles dans le canal spécifié dans .env.local.
2. Pour chacun des éléments de rubrique, nous extraitons ses détails.

Ouvrez scripts/services.js et recherchez la fonction getTopicsListPageData(), qui obtient toutes les données de la page d'accueil.

export function getTopicsListPageData() {
      const client = getDeliveryClient();
      return fetchHomePage(client)
        .then((data) => (
          getRenditionURLs(client, data.logoID)
            .then((renditionUrls) => {
              data.companyThumbnailRenditionUrls = renditionUrls;
              return data;
            })
        ));
    }

La fonction fetchHomePage(), appelée par la fonction getTopicsListPageData(), obtient tous les éléments du canal. Vous obtenez ainsi l'ID de logo, le nom de la société, les URL de contact et de présentation, ainsi qu'une liste de rubriques.

function fetchHomePage(client) {
      return client.queryItems({
        q: '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
      }).then((data) => {
        const logoID = data.items[0].fields.company_logo.id;
        const title = data.items[0].fields.company_name;
        const aboutUrl = data.items[0].fields.about_url;
        const contactUrl = data.items[0].fields.contact_url;
    
        const { topics } = data.items[0].fields;
        const promises = [];
    
        topics.forEach((origTopic) => {
          // add a promise to the total list of promises to get the full topic details
          promises.push(
            fetchTopic(client, origTopic.id)
              .then((topic) => topic),
          );
        });
    
        // execute all the promises returning a single dimension array of all
        // of the topics and the other home page data
        return Promise.all(promises)
          .then((allTopics) => (
            {
              logoID,
              companyTitle: title,
              aboutUrl,
              contactUrl,
              topics: flattenArray(allTopics),
            }
          )).catch((error) => logError('Fetching topics failed', error));
      }).catch((error) => logError('Fetching home page data failed', error));
    }

La fonction fetchTopic() est ensuite appelée pour chaque ID de rubrique afin d'obtenir les détails complets de la rubrique.

function fetchTopic(client, topicId) {
      return client.getItem({
        id: topicId,
        expand: 'fields.thumbnail',
      }).then((topic) => {
        topic.renditionUrls = getSourceSet(topic.fields.thumbnail);
        return topic;
      }).catch((error) => logError('Fetching topic failed', error));
    }

getTopicsListPageData() appelle également getRenditionURLs() pour obtenir l'URL de l'image à afficher.

function getRenditionURLs(client, identifier) {
      return client.getItem({
        id: identifier,
        expand: 'fields.renditions',
      }).then((asset) => getSourceSet(asset))
        .catch((error) => logError('Fetching Rendition URLs failed', error));
    }

Données de page de rubrique

Next.js utilise la génération de site statique pour pré-renvoyer chaque page de l'application. Les chemins de chaque page de rubrique contiennent l'ID de rubrique. Ouvrez scripts/services.js et recherchez la fonction fetchTopicIds(), qui est utilisée pour obtenir tous les ID de rubrique.

export function fetchTopicIds() {
      const client = getDeliveryClient();
    
      return client.queryItems({
        q: '(type eq "OCEGettingStartedHomePage" AND name eq "HomePage")',
      }).then((data) => {
        const { topics } = data.items[0].fields;
        const topicIds = topics.map(
          (topic) => topic.id,
        );
        return topicIds;
      }).catch((error) => logError('Fetching topic ids failed', error));
    }

Une page de rubrique reçoit un ID de sujet et nécessite plusieurs appels de données pour obtenir toutes ses données :

1. Obtenir le nom du sujet
2. Obtenir tous les articles de la rubrique indiquée.
3. Pour chaque article, obtenez ses URL de rendu.

Recherchez la fonction fetchTopicName(topicId), qui est utilisée pour obtenir le nom de la rubrique.

export function fetchTopicName(topicId) {
      const client = getDeliveryClient();
      return client.getItem({
        id: topicId,
      }).then((topic) => topic.name)
        .catch((error) => logError('Fetcvhing topic name failed', error));
    }

Recherchez la fonction fetchTopicArticles(topicId), qui obtient les données d'articles pour la page de rubrique.

export function fetchTopicArticles(topicId) {
      const client = getDeliveryClient();
      return client.queryItems({
        q: `(type eq "OCEGettingStartedArticle" AND fields.topic eq "${topicId}")`,
        orderBy: 'fields.published_date:desc',
      }).then((data) => {
        const promises = [];
        const articles = data.items;
    
        articles.forEach((article) => {
          // add a promise to the total list of promises to get the article url
          promises.push(
            getRenditionURLs(client, article.fields.image.id)
              .then((renditionUrls) => {
                article.renditionUrls = renditionUrls;
                // Note: the spread operator is used here so that we return a top level
                // object, rather than a value which contains the object
                // i.e we return
                //   {
                //     field1: 'value', field2 : "value", etc
                //   },
                // rather than
                //   {
                //     name: {
                //             field1: 'value', field2 : "value", etc
                //           }
                //    }
                return {
                  ...article,
                };
              }),
          );
        });
    
        // execute all the promises and return all the data
        return Promise.all(promises)
          .then((allArticles) => ({
            topicId,
            articles: flattenArray(allArticles),
          }));
      }).catch((error) => logError('Fetching topic articles failed', error));
    }

La méthode fetchTopicArticles() utilise également la méthode getRenditionURLs() comme vu précédemment pour obtenir l'image de l'article.

Données de la page Article

Les chemins de chaque page Article contiennent l'ID article. Ouvrez scripts/services.js et recherchez la fonction fetchAllArticlesSimple(), qui est utilisée pour obtenir tous les ID d'article utilisés lors de la pré-rendu de chaque page d'article.

export function fetchAllArticlesSimple() {
      const client = getDeliveryClient();
      return fetchTopicIds()
        .then((topicIds) => {
          const promises = [];
          topicIds.forEach((topicId) => {
            // add a promise to the total list of promises to get the article url
            promises.push(
              fetchTopicArticlesSimple(client, topicId)
                .then((data) => {
                  const { items } = data;
                  const articles = items.map((item) => (
                    {
                      id: item.id,
                      name: item.name,
                    }
                  ));
                  return articles;
                }),
            );
          });
    
          // execute all the promises and return all the data
          return Promise.all(promises)
            .then((allArticles) => flattenArray(allArticles));
        }).catch((error) => logError('Fetching basic information for all articles failed', error));
    }

fetchAllArticlesSimple() appelle fetchTopicArticlesSimple() pour obtenir une liste simplifiée d'articles.

function fetchTopicArticlesSimple(client, topicId) {
      return client.queryItems({
        q: `(type eq "OCEGettingStartedArticle" AND fields.topic eq "${topicId}")`,
        orderBy: 'fields.published_date:desc',
      }).then((data) => data)
        .catch((error) => logError('Fetching basic information for topic articles failed', error));
    }

Une page d'article reçoit un ID d'article et nécessite plusieurs appels de données pour obtenir toutes ses données :

1. Obtenir les détails de l'article spécifié.
2. Pour chaque article, obtenez ses URL de rendu.

Recherchez la fonction fetchArticleDetails(articleId), qui obtient les données de la page d'article. La méthode utilise la fonction getRenditionURL(), qui obtient l'image de l'article et utilise également la fonction getMediumRenditionURL() pour obtenir l'image de l'auteur.

export function fetchArticleDetails(articleId) {
      const client = getDeliveryClient();
      return client.getItem({
        id: articleId,
        expand: 'fields.author,fields.image',
      }).then((article) => {
        const { fields } = article;
        const title = fields.author.name;
        const date = fields.published_date;
        const content = fields.article_content;
        const imageCaption = fields.image_caption;
        const { topic } = fields;
        const { name } = article;
        const renditionUrls = getSourceSet(article.fields.image);
        const avatarID = article.fields.author.fields.avatar.id;
        // Get the author's avatar image
        return getRenditionURLs(client, avatarID)
          .then((authorRenditionUrls) => (
            // return an object with just the data needed
            {
              id: articleId,
              name,
              title,
              date,
              content,
              imageCaption,
              renditionUrls,
              authorRenditionUrls,
              topicId: topic.id,
              topicName: topic.name,
            }
          ));
      }).catch((error) => logError('Fetching article details failed', error));
    }

La méthode fetchArticleDetails() utilise également la méthode getRenditionURLs() comme vu précédemment pour obtenir l'image d'avatar.

Maintenant que nous avons nos requêtes de données, nous pouvons afficher les réponses dans nos composants Next.js.

Composants Next.js

Next.js est basé sur React et React utilise une technologie appelée JSX, qui est une extension de syntaxe de type HTML à JavaScript, pour afficher du contenu. Bien que vous puissiez écrire du JavaScript pur pour afficher des données à partir d'Oracle Content Management, nous vous recommandons vivement d'utiliser JSX.

L'application de blog décompose chaque page en plusieurs petits composants.

Les sections suivantes présentent la façon dont Next.js rend notre application dans chacun de nos composants :

• Dossier des pages
• Composant d'index
• Composant d'en-tête
• Composant TopicsListItem
• Composant ArticleListPage
• Composant ArticesListItem
• Composant ArticleDetailsPage
• Chemins de navigation et composants du chemin de navigation

Dossier des pages

Dans notre site, nous voulons fournir trois itinéraires :

• La page d'accueil, qui se compose de la liste des sujets
• La page de rubrique, qui affiche tous les articles de la rubrique sélectionnée
• Page d'article individuelle affichant l'article sélectionné

Toute page du répertoire de pages Next.js sera traitée comme un routage pour l'application.

Composant d'index

La page d'accueil comprend une liste composée de sujets individuels. Il est rendu par le composant Index, situé dans pages/index.jsx.

Le composant importe l'API pour obtenir des données à partir du fichier services.js.

import { getTopicsListPageData } from '../scripts/services';

Dans getStaticProps(), appelé lors de la création, le composant obtient toutes les données requises pour afficher la page d'accueil.

export async function getStaticProps() {
      const data = await getTopicsListPageData();
      return { props: { data } };
    }

Composant d'en-tête

Le composant Index utilise le composant En-tête pour afficher le titre de la société, le logo de la société et les liens Nous contacter/A propos de nous.

Il se trouve dans src/components/Header.jsx et reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Composant TopicsListItem

Le composant Index utilise le composant TopicsListItem pour afficher la rubrique individuelle dans la liste.

Le composant TopicsListItem, situé dans src/components/TopicsListItem.jsx, reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Composant ArticleListPage

La page Rubrique affiche les articles de la rubrique dont l'ID est transmis au composant dans l'URL. Il est rendu par le composant ArticleListPage, situé dans les pages/articles/[id].jsx.

Le composant importe l'API pour obtenir des données à partir du fichier services.js.

import { fetchTopicIds, fetchTopicName, fetchTopicArticles } from '../../scripts/services';

Les URL de la page Rubriques sont des URL dynamiques contenant l'ID du sujet en tant que chemin. Par exemple, les chemins d'URL sont

• /articles/topicId1
• /articles/topicId2
• /articles/topicId3

Lorsque Next.js utilise la génération de site statique pour les pages avec des URL dynamiques, il appelle getStaticPaths() pour obtenir tous les chemins de cette page.

export async function getStaticPaths() {
      const topicIds = await fetchTopicIds();
    
      // Generate the paths we want to pre-render based on posts
      const paths = topicIds.map((topicId) => ({
        params: { id: topicId },
      }));
    
      return {
        paths,
        fallback: false,
      };
    }

La fonction getStaticProps() permet d'obtenir les données d'une seule instance de la page Rubriques. L'ID de rubrique est obtenu à partir du paramètre transmis dans la méthode. L'ID de rubrique est ensuite utilisé pour obtenir toutes les données requises pour cette page.

export async function getStaticProps(context) {
      const { params } = context;
      const { id } = params;
      const [data, topicName] = await Promise.all([fetchTopicArticles(id), fetchTopicName(id)]);
    
      return {
        props: {
          topicId: id,
          topicName,
          data,
        },
      };
    }

Composant ArticesListItem

Le composant ArticleListPage utilise le composant ArticlesListItem pour afficher les différents articles de la liste.

Le composant ArticlesListItem se trouve dans src/components/ArticlesListItem.jsx et reçoit toutes ses données en tant que propriétés. Il n'obtient aucune donnée supplémentaire du serveur.

Composant ArticleDetailsPage

La page Article affiche les détails de l'article dont l'ID est transmis dans l'URL. Il est affiché par le composant ArticleDetailsPage, situé dans pages/article/[id].jsx.

Le composant importe l'API pour obtenir des données à partir du fichier services.js.

import { fetchAllArticlesSimple, fetchArticleDetails } from '../../scripts/services';

Les URL de la page Article sont des URL dynamiques contenant l'ID d'article en tant que chemin. Par exemple, les chemins d'URL sont

• /article/articleId1
• /article/articleId2
• /article/articleId3

Lorsque Next.js utilise la génération de site statique pour les pages avec des URL dynamiques, il appelle getStaticPaths() pour obtenir tous les chemins de cette page.

export async function getStaticPaths() {
      const articles = await fetchAllArticlesSimple();
    
      // Generate the paths we want to pre-render based on posts
      return {
        paths: articles.map((article) => ({
          params: { id: article.id },
        })),
        fallback: true,
      };
    }

La fonction getStaticProps() est utilisée pour obtenir les données d'une instance unique de la page Article. L'ID d'article est obtenu à partir du paramètre transmis dans la méthode. L'ID article est ensuite utilisé pour obtenir toutes les données requises pour cette page.

export async function getStaticProps(context) {
      const { params } = context;
      const { id } = params;
      const data = await fetchArticleDetails(id);
      return {
        props: {
          data,
        },
      };
    }

Chemins de navigation et composants du chemin de navigation

Les composants Index et ArticleDetailsPage utilisent les composants Chemin de navigation et Chemin de navigation pour afficher les chemins de navigation en haut de la page, ce qui permet à l'utilisateur de revenir à la page Rubrique ou Page d'accueil. Les deux composants reçoivent toutes leurs données en tant que propriétés ; ils n'obtiennent aucune donnée supplémentaire du serveur.

Tâche 3 : Préparer votre application pour le déploiement

Maintenant que nous avons créé notre site de blog Next.js, nous devons le voir sur un serveur de développement local afin que nous puissions déboguer tous les problèmes et prévisualiser l'application avant son déploiement.

Préparez l'application pour le déploiement en deux étapes :

1. Lancement d'un serveur de développement local
2. Utiliser des scripts pour créer et exécuter l'application en cours de développement et de production

Faire fonctionner un serveur de développement local

Vous pouvez démarrer un serveur de développement localement en exécutant la commande suivante.

npm run dev

Ouvrez ensuite votre navigateur sur http://localhost:3000 pour voir votre site en action.

Remarque : les pages ne sont pas prérendues. Pour prédéfinir les pages, reportez-vous à la section suivante.

Utilisation de scripts pour créer et exécuter l'application en cours de développement et de production

Pour la production, le script de création est utilisé pour générer le site de manière statique.

npm run build

Le script de démarrage permet de démarrer un serveur Node.js traitant les pages générées de manière statique.

npm run start

---

Informations relatives au titre et au copyright

Créez un blog dans Next.js avec Headless Oracle Content Management

F49312-01

Octobre 2021

Copyright © 2021, Oracle and/or its affiliates.

Auteur principal : Oracle Corporation