Créer une galerie d'images dans Next.js avec Oracle Content Management Headless

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.

Ce tutoriel vous présente les étapes de base de la création d'un visualiseur d'image à l'aide de Next.js, avec Oracle Content Management en tant que système de gestion de contenu et son kit SDK de contenu. Vous découvrirez comment les taxonomies peuvent être utilisées pour classer le contenu et comment différents rendus de ressources numériques peuvent être utilisés dans différents cas d'utilisation. Cet exemple Next.js est disponible sur GitHub.

Ce tutoriel se compose de trois tâches :

Préparer Oracle Content Management
Créez la galerie d'images dans Next.js
Préparer votre application au déploiement

Prérequis

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

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 galerie d'images se compose de plusieurs pages d'images de nourriture et de boissons disponibles dans un café.

Cette image montre une galerie d'images avec différents types de sacels, certains avec crème ou toppings, ou les deux.

Pour regarder ce que nous construisons, voici l'état de fin de notre tutoriel, une version en direct de ce site de galerie d'images :

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

Les catégories sont des noeuds enfant d'une taxonomie et peuvent être organisées en hiérarchies. Pour notre galerie d'images, nous voulons afficher toutes les catégories disponibles, quelle que soit l'organisation. Pour cela, nous devons d'abord trouver les taxonomies disponibles, que nous utilisons la méthode getTaxonomies() du kit SDK de contenu.

Remarque : l'implémentation de getTaxonomies utilise la ressource d'API REST GET /published/api/v1.1/taxonomies.

Ensuite, nous devons obtenir le jeu de catégories pour chacune des taxonomies. Pour ce faire, utilisez la méthode queryTaxonomyCategories() du kit SDK de contenu.

Remarque : l'implémentation de queryTaxonomyCategories utilise l'API REST GET /published/api/v1.1/taxonomies/{id}/categories.

Pour créer l'aperçu d'une catégorie, comme Bagels, nous devons compter le nombre d'images et les URL des quatre premières images.

Cette image présente des images dans la catégorie Bagels.

Notre demande de recherche des ressources publiées dans la catégorie spécifie les critères de catégorie via une chaîne de requête, comme suit :

"(taxonomies.categories.nodes.id eq 892CD6BC4F654249A00CB7942EE8C773)"

Pour optimiser le chargement de l'image, nous utiliserons un rendu de l'image nommée 'Thumbnail'. Reportez-vous à retrieveThumbnailURL(), dans scripts/services.js, pour connaître le code qui examine l'ensemble de rendus disponibles pour chaque image.

Remarque : en plus de publier les ressources numériques que nous voulons afficher, vous devez publier les taxonomies sur le canal.

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

Ce tutoriel repose sur l'hypothèse que vous avez créé votre référentiel de ressources et que vous disposez actuellement d'un modèle de contenu vide (c'est-à-dire qu'aucun type de contenu n'a été créé).

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 :

Créez un canal et un référentiel de ressources.
Importer le pack de ressources pour les échantillons Oracle Content Management
Télécharger vos propres ressources d'image
Créer des taxonomies et les lier à des ressources d'image

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 :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
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.
Dans l'angle supérieur droit, cliquez sur Créer pour créer un canal. Nommez le canal 'OCEImageGalleryChannel' dans le cadre de ce tutoriel et conservez l'accès public. Cliquez sur Enregistrer pour créer le canal.
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.
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 'OCEImageGalleryRepository' dans le cadre de ce tutoriel.
Dans le champ Canaux de publication, sélectionnez OCEImageGalleryChannel pour indiquer à Oracle Content Management que le contenu du référentiel OCEImageGalleryRepository peut être publié sur le canal OCEImageGalleryChannel. Cliquez sur Enregistrer lorsque vous avez terminé.

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.

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. Vous pouvez télécharger l'archive du pack de ressources, OCESamplesAssetPack.zip, puis l'extraire dans le répertoire de votre choix :

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é OCEImageGallery_data.zip.
Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
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 OCEImageGalleryRepository et cliquez sur le bouton Importer le contenu dans la barre d'actions supérieure.
Téléchargez OCEImageGallery_data.zip à partir de votre ordinateur local vers le dossier Documents.
Une fois téléchargé, sélectionnez OCEImageGallery_data.zip et cliquez sur OK pour importer le contenu dans votre référentiel de ressources.
Une fois le contenu importé, accédez à la page Immobilisations et ouvrez le référentiel OCEImageGalleryRepository. Vous verrez que toutes les images et éléments de contenu associés ont été ajoutés au référentiel de ressources.
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, OCEImageGalleryChannel.
Avant la publication, vous devez valider toutes les ressources. Ajoutez d'abord OCEImageGalleryChannel en tant que canal sélectionné, puis cliquez sur le bouton Valider.
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.)

Cette image présente la page Actifs, avec toutes les ressources publiées.

Après avoir importé Oracle Content Management Samples Asset Pack, vous pouvez commencer à créer la galerie d'images dans Next.js.

Télécharger vos propres ressources d'image

Pour ce tutoriel, nous utilisons un référentiel de ressources appelé 'OCEImageGalleryRepository' pour créer la page d'accueil de notre site de galerie. Cette page d'accueil se compose du titre "Image Gallery" (Galerie d'images) ainsi que d'albums de collection d'images qui possèdent des ressources d'image.

Cette image montre la page d'accueil de la galerie d'images, avec des images de différentes catégories d'images : sandwiches, boissons, dessert, petit déjeuner et nourriture.

Pour ajouter des ressources d'image au référentiel de ressources de la galerie, procédez comme suit :

Connectez-vous à l'interface Web d'Oracle Content Management.
Cliquez sur Ressources dans le menu de navigation de gauche.
Ouvrez le référentiel OCEImageGalleryRepository.
Cliquez sur Ajouter dans l'angle supérieur droit de la page pour ajouter des ressources d'image au référentiel de ressources de la galerie.
Téléchargez vos propres nouvelles ressources à partir de votre ordinateur local ou choisissez des ressources existantes déjà dans Oracle Content Management.

Créer des taxonomies et les lier à des ressources d'image

Vous devez créer une taxonomie dans Oracle Content Management, puis affecter des catégories aux ressources de votre référentiel.

Pour créer une taxonomie dans Oracle Content Management, procédez comme suit :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
Choisissez Contenu dans le menu de navigation de gauche, puis choisissez Taxonomies dans la liste de sélection de l'en-tête de page.
Dans l'angle supérieur droit, cliquez sur Créer pour créer une taxonomie. Nommez le canal 'OCEImageGalleryTaxonomy' dans le cadre de ce tutoriel.
Cliquez sur Créer.
Créez à présent la taxonomie en ajoutant des catégories. Cliquez sur Ajouter une catégorie.
Nommez l'élément de catégorie parent "Food" et ajoutez les catégories enfant suivantes :
- Petit déjeuner
- Dessert
- Boissons
- Sandwichs
Cliquez sur Terminé en haut à droite de l'écran.
Sur la page Taxonomies, sélectionnez la taxonomie OCEImageGalleryTaxonomy et cliquez sur Promouvoir dans la barre d'actions pour la rendre disponible pour utilisation dans vos référentiels de ressources.

Ensuite, modifiez le référentiel OCEImageGalleryRepository pour activer la taxonomie OCEImageGalleryTaxonomy pour ce référentiel :

Connectez-vous à l'interface Web d'Oracle Content Management en tant qu'administrateur.
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.
Sélectionnez et modifiez le référentiel OCEImageGalleryRepository.
Dans le champ Taxonomies, sélectionnez OCEImageGalleryTaxonomy afin de pouvoir affecter des catégories de cette taxonomie aux ressources du référentiel OCEImageGalleryRepository.
Cliquez sur Enregistrer.

Affectez ensuite des catégories de taxonomie à chacune des ressources d'image du référentiel OCEImageGalleryRepository :

Connectez-vous à l'interface Web d'Oracle Content Management.
Cliquez sur Ressources dans le menu de navigation de gauche.
Ouvrez le référentiel OCEImageGalleryRepository.
Sélectionnez une ou plusieurs ressources d'image, cliquez sur Plus dans la barre d'actions, puis choisissez Catégories dans le menu.
Dans le panneau Catégories, cliquez sur Ajouter une catégorie. Recherchez le nom de la catégorie dans la barre de recherche ou sélectionnez une catégorie dans la structure hiérarchique de la taxonomie, puis cliquez sur Ajouter pour affecter la catégorie sélectionnée. Vous pouvez affecter plusieurs catégories à une immobilisation.
Une fois que vous avez terminé l'affectation de taxonomies à toutes les ressources d'image, sélectionnez toutes les ressources de votre référentiel et publiez-les dans le canal OCEImageGalleryChannel.

Tâche 2 : créer la galerie d'images dans Next.js

Pour utiliser notre contenu Oracle Content Management dans une application Next.js, nous pouvons utiliser l'exemple de galerie d'images 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 la galerie d'images dans Next.js :

Cloner l'exemple de référentiel et installer les dépendances
Configurer l'application Next.js
Utiliser le kit SDK Oracle Content Management Content
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-gallery-sample.git
    cd oce-nextjs-gallery-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 galerie d'images 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=e0b6421e73454818948de7b1eaddb091

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 OCEImageGalleryChannel.

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 :

Nous chargeons d'abord les taxonomies pour le canal spécifié dans .env.
Pour chacune des taxonomies, nous obtenons toutes les catégories de cette taxonomie.
Pour chaque catégorie, quatre éléments de contenu sont inclus dans cette catégorie.
Pour chacun de ces éléments, nous obtenons ses URL de rendu.

Ouvrez src/scripts/services.js et recherchez la fonction getHomePageData(), qui est utilisée pour obtenir toutes les données de la page d'accueil.

export function getHomePageData() {
      const deliveryClient = getClient();
      // get the categories for all taxonomies then add all the category items to each category
      return fetchAllTaxonomiesCategories(deliveryClient).then(
        (initialCategories) => addItemsToCategories(deliveryClient, initialCategories).then(
          (categories) => {
            // pull out all of the items for all of the categories then
            // append the computed renditionUrls to each item.
            const allItems = categories.map((category) => category.items);
            const items = flattenArray(allItems);
            // for each item, retrieve the rendition urls and add it to the item
            items.forEach((item) => {
              item.renditionUrls = getSourceSet(item);
            });
            return { categories };
          },
        ),
      );
    }

getHomePageData() appelle fetchAllTaxonomiesCategories() pour obtenir toutes les catégories dans toutes les taxonomies.

export function fetchAllTaxonomiesCategories(client) {
      return client
        .getTaxonomies()
        .then((topLevelItem) => {
          const taxonomyIds = topLevelItem.items.map((taxonomy) => taxonomy.id);
    
          const promises = [];
          // loop over each taxonomy id
          taxonomyIds.forEach((taxonomyId) => {
            // add a promise to the total list of promises to get the categories
            // for the specific taxonomy id
            promises.push(
              fetchCategoriesForTaxonomyId(client, taxonomyId)
                .then((categoriesTopItem) => categoriesTopItem.items),
            );
          });
    
          // execute all the promises returning a single dimension array of all
          // of the categories for all of the taxonomies (note: no taxonomy information)
          // is returned.
          return Promise.all(promises)
            .then((arrayOfCategoryArray) => flattenArray(arrayOfCategoryArray));
        })
        .catch((error) => logError('Fetching taxonomies failed', error));
    }

fetchAllTaxonomiesCategories() appelle fetchCategoriesForTaxonomyId() pour obtenir toutes les catégories d'une taxonomie spécifique.

function fetchCategoriesForTaxonomyId(client, taxonomyId) {
      return client
        .queryTaxonomyCategories({
          id: `${taxonomyId}`,
        })
        .then((topLevelItem) => topLevelItem)
        .catch((error) => logError('Fetching categories for taxonomy failed', error));
    }

La fonction addItemsToCategories est ensuite appelée pour ajouter les quatre éléments de catégorie à chaque catégorie.

function addItemsToCategories(client, categories) {
      const promises = [];
    
      // loop over each category
      categories.forEach((category) => {
        // add a promise to the total list of promises to get the items
        // for the specific category
        promises.push(
          fetchItemsForCategory(client, category.id, true).then(
            (topLevelItem) => {
              // add the item to the category before returning it
              category.items = topLevelItem.items;
              category.totalResults = topLevelItem.totalResults;
              return {
                ...category,
              };
            },
          ),
        );
      });
    
      // execute all the promises before returning the data
      return Promise.all(promises).then((arrayOfItems) => flattenArray(arrayOfItems));
    }

Enfin, getSourceSet vu précédemment est appelé pour obtenir les URL de rendu de chaque élément.

Données de la page Grille d'images

La page de grille d'images reçoit un ID de catégorie et nécessite plusieurs appels de données pour obtenir toutes ses données :

Obtenir tous les articles de la catégorie spécifiée.
Pour chaque élément, obtenez ses URL de rendu.

Ouvrez src/scripts/services.js et recherchez la fonction getImageGridPageData(), qui est utilisée pour obtenir toutes les données de la page de grille d'image.

export function getImageGridPageData(categoryId) {
      const client = getClient();
    
      return fetchItemsForCategory(client, categoryId, false).then(
        (topLevelItem) => {
          const { totalResults } = topLevelItem;
          // for each item, retrieve the rendition urls and add it to the item
          topLevelItem.items.forEach((item) => {
            item.renditionUrls = getSourceSet(item);
          });
          return {
            totalResults,
            items: topLevelItem.items,
          };
        },
      );
    }

Il appelle fetchItemsForCategory, comme la page d'accueil, mais sans limite, afin que tous les éléments soient renvoyés, pas seulement quatre.

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 galerie d'images décompose chaque page en un certain nombre de composants plus petits, dont certains sont utilisés dans les pages d'accueil et de grille d'images.

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 de galerie
Composant ImageGridPage

Dossier des pages

Dans notre site, nous voulons fournir deux routes :

La page d'accueil, qui affiche la liste des catégories d'image
La page de grille d'images, qui affiche tous les articles pour un ID de catégorie donné

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 se compose d'une liste de catégories pour une taxonomie, avec un aperçu de quatre éléments de cette catégorie. 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 { getHomePageData } 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 getHomePageData();
      return {
        props: { data },
      };
    }

Composant de galerie

Le composant Galerie représente la catégorie individuelle de la liste. Il affiche un aperçu de quatre des articles de la catégorie.

Il se trouve dans src/components/Gallery.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 ImageGridPage

Le composant Page Grille d'images affiche les éléments de la catégorie dont l'ID est transmis au composant dans l'URL. Il est affiché par le composant ArticleListPage, situé dans les pages/category/[id].jsx.

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

import { fetchAllTaxonomiesCategories, getImageGridPageData } from '../../scripts/services';

Les URL de la page Grille d'images sont des URL dynamiques contenant l'ID et le nom de la catégorie en tant que chemin, par exemple les chemins d'URL

/category/categoryId1-name1
/category/categoryId2-name2
/category/categoryId3-name3

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 categories = await fetchAllTaxonomiesCategories();
      return {
        paths: categories.map((category) => ({
          params: { id: `${category.id}-${category.name}` },
        })),
        fallback: true,
      };
    }

La fonction getStaticProps() permet d'obtenir les données d'une instance unique de la page Grille d'images. L'ID et le nom de la catégorie sont obtenus à partir du paramètre transmis dans la méthode. L'ID catégorie 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 arr = id.split('-');
      const categoryName = arr[1];
      const categoryId = arr[0];
      const data = await getImageGridPageData(categoryId);
      return {
        props: {
          data,
          categoryName,
        },
      };
    }

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 :

Lancement d'un serveur de développement local
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 : cette opération n'affichera pas les pages avant l'affichage des 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éer une galerie d'images dans Next.js avec Oracle Content Management Headless

F49335-01

Octobre 2021

Auteur principal : Oracle Corporation