Creare una galleria di immagini in Next.js con Oracle Content Management headless

Introduzione

Next.js è una struttura Web di sviluppo frontend React open source che consente funzionalità quali il rendering lato server e la generazione di siti Web statici per le applicazioni Web basate su React.

Questa esercitazione descrive i passi di base per la creazione di un visualizzatore di immagini tramite Next.js, con Oracle Content Management come sistema di gestione dei contenuti e il relativo SDK dei contenuti. Vedrai come utilizzare le tassonomie per classificare i contenuti e come utilizzare le rendition diverse degli asset digitali per vari casi d'uso. Questo esempio di Next.js è disponibile su GitHub.

L'esercitazione include tre task:

Prepara Oracle Content Management
Crea la galleria di immagini in Next.js
Preparare l'applicazione per la distribuzione

Prerequisiti

Prima di procedere con questa esercitazione, si consiglia di leggere le seguenti informazioni:

Per seguire questa esercitazione, sono necessari:

una sottoscrizione a Oracle Content Management
un account Oracle Content Management con il ruolo Amministratore contenuto
un computer Windows o Mac con Node versione 10 o successiva

Cosa stiamo costruendo

La nostra galleria di immagini sarà composta da diverse pagine di immagini di cibo e bevande disponibili in un bar.

Questa immagine mostra una galleria di immagini con diversi tipi di bagel, alcuni con crema o guarnizioni, o entrambi.

Per dare un'occhiata a ciò che stiamo costruendo, ecco lo stato finale del nostro tutorial, una versione live di questo sito della galleria di immagini:

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

Le categorie sono nodi figlio di una tassonomia e possono essere organizzate in gerarchie. Per la galleria di immagini, vogliamo mostrare tutte le categorie disponibili indipendentemente dall'organizzazione. Per ottenere questo risultato, dobbiamo innanzitutto trovare le tassonomie disponibili, che utilizziamo il metodo getTaxonomies() dell'SDK contenuto.

Nota: l'implementazione di getTaxonomies utilizza il GET della risorsa API REST /published/api/v1.1/taxonomies.

Successivamente, dobbiamo ottenere l'insieme di categorie per ciascuna delle tassonomie. Questa operazione viene eseguita utilizzando il metodo queryTaxonomyCategories() dell'SDK contenuto.

Nota: l'implementazione di queryTaxonomyCategories utilizza il GET dell'API REST /published/api/v1.1/taxonomies/{id}/categories.

Per creare l'anteprima di una categoria, come Bagels, dobbiamo ottenere un conteggio del numero di immagini e degli URL delle prime quattro immagini.

Questa immagine mostra le immagini nella categoria Borse.

La nostra richiesta di trovare gli asset pubblicati nella categoria specifica i criteri della categoria mediante una stringa di query, come segue:

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

Per ottimizzare il caricamento dell'immagine, verrà utilizzata una rendition dell'immagine denominata 'Anteprima'. Vedere retrieveThumbnailURL(), in script/services.js, per il codice che esamina il set di rendition disponibili per ogni immagine.

Nota: oltre alla pubblicazione degli asset digitali che si desidera visualizzare, è necessario pubblicare anche le tassonomie nel canale.

Per continuare, sarà necessario disporre di una sottoscrizione attiva a Oracle Content Management ed eseguire il login con il ruolo Amministratore contenuto.

Task 1: Prepara Oracle Content Management

Questa esercitazione si basa sul presupposto che il repository degli asset sia stato creato e che attualmente esista un modello di contenuto vuoto, ovvero nessun tipo di contenuto creato.

Se non si dispone già di un'istanza di Oracle Content Management, vedere Avvio rapido per informazioni su come registrarsi per Oracle Cloud, eseguire il provisioning di un'istanza di Oracle Content Management e configurare Oracle Content Management come CMS senza problemi.

Per questa esercitazione è necessario creare un modello di contenuto in due modi. È disponibile un pacchetto asset scaricabile che riempirà il repository vuoto con tipi di contenuto e contenuti associati oppure è possibile creare modelli di contenuto e contenuti personalizzati.

Per preparare Oracle Content Management, effettuare le operazioni riportate di seguito.

Creare un repository di canali e asset.
Importa pacchetto asset campioni di Oracle Content Management
Carica i tuoi asset immagine
Crea tassonomie e collega il tema agli asset immagine

Crea un repository di canale e asset

Prima è necessario creare un canale e un repository di asset in Oracle Content Management in modo da poter pubblicare il contenuto.

Per creare un canale e un repository di asset in Oracle Content Management, effettuare le operazioni riportate di seguito.

Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Pubblicazione canali dall'elenco di selezione nell'intestazione della pagina.
Nell'angolo in alto a destra fare clic su Crea per creare un nuovo canale. Assegnare un nome al canale 'OCEImageGalleryChannel' ai fini di questa esercitazione e mantenere pubblico l'accesso. Fare clic su Salva per creare il canale.
Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Repositori dalla lista di selezione nell'intestazione della pagina.
Nell'angolo in alto a destra fare clic su Crea per creare un nuovo repository di asset. Assegnare un nome al repository di asset 'OCEImageGalleryRepository' ai fini di questa esercitazione.
Nel campo Pubblicazione canali selezionare OCEImageGalleryChannel per indicare a Oracle Content Management che il contenuto nel repository OCEImageGalleryRepository può essere pubblicato nel canale OCEImageGalleryChannel. Al termine, fare clic su Salva.

Importa pacchetto asset campioni di Oracle Content Management

È possibile scaricare un pacchetto di asset di esempio Oracle Content Management preconfigurato contenente tutti i tipi di contenuto e gli asset necessari per questa esercitazione.

È possibile caricare una copia del contenuto utilizzato in questa esercitazione dal pacchetto di asset dei campioni di Oracle Content Management. In questo modo sarà possibile provare i tipi di contenuto e modificare il contenuto. È possibile scaricare l'archivio del pacchetto di asset, OCESamplesAssetPack.zip, quindi estrarlo in una directory selezionata:

Scaricare il pacchetto asset di campioni di Oracle Content Management (OCESamplesAssetPack.zip) dalla pagina download di Oracle Content Management. Estrarre il file ZIP scaricato in una posizione sul computer. Dopo l'estrazione, questa posizione includerà un file denominato OCEImageGallery_data.zip.
Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Repositori dalla lista di selezione nell'intestazione della pagina. Selezionare ora OCEImageGalleryRepository e fare clic sul pulsante Importa contenuto nella barra delle azioni superiore.
Caricare OCEImageGallery_data.zip dal computer locale alla cartella Documenti.
Dopo aver caricato, selezionare OCEImageGallery_data.zip e fare clic su OK per importare il contenuto nel repository di asset.
Dopo aver importato il contenuto, passare alla pagina Asset e aprire il repository OCEImageGalleryRepository. Si noterà che tutte le immagini e gli elementi di contenuto correlati sono stati aggiunti al repository di asset.
Fare clic su Seleziona tutto in alto a sinistra, quindi su Pubblica per aggiungere tutti gli asset importati al canale di pubblicazione creato in precedenza, OCEImageGalleryChannel.
Prima della pubblicazione, è necessario convalidare tutti gli asset. Aggiungere prima OCEImageGalleryChannel come canale selezionato, quindi fare clic sul pulsante Convalida.
Dopo la convalida degli asset, è possibile pubblicare tutti gli asset nel canale selezionato facendo clic sul pulsante Pubblica nell'angolo superiore destro.

Al termine, è possibile visualizzare nella pagina Asset la pubblicazione di tutti gli asset. (È possibile visualizzare l'icona sopra il nome dell'asset).

Questa immagine mostra la pagina Asset con tutti gli asset pubblicati.

Dopo aver importato il pacchetto di asset di campioni di Oracle Content Management, è possibile avviare la creazione della galleria di immagini in Next.js.

Carica i tuoi asset immagine

In questa esercitazione viene utilizzato un repository di asset denominato 'OCEImageGalleryRepository' per creare la home page per il sito della galleria. Questa home page è costituita dal titolo 'Galleria immagini' e dagli album di raccolte di immagini che contengono asset di immagini.

Questa immagine mostra la home page della galleria di immagini, con immagini di varie categorie di immagini: panini, bevande, dessert, colazione e cibo.

Per aggiungere asset immagine al repository di asset galleria:

Eseguire il login all'interfaccia Web di Oracle Content Management.
Fare clic su Asset nel menu di navigazione a sinistra.
Aprire il repository OCEImageGalleryRepository.
Fare clic su Aggiungi nell'angolo superiore destro della pagina per aggiungere asset immagine al repository di asset galleria.
Caricare i nuovi asset dal computer locale o scegliere gli asset esistenti già in Oracle Content Management.

Crea tassonomie e collega il tema agli asset immagine

È necessario creare una tassonomia in Oracle Content Management, quindi assegnare categorie agli asset nel repository.

Per creare una tassonomia in Oracle Content Management, effettuare le operazioni riportate di seguito.

Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Tassonomie dall'elenco di selezione nell'intestazione della pagina.
Nell'angolo in alto a destra fare clic su Crea per creare una nuova tassonomia. Assegnare un nome al canale 'OCEImageGalleryTaxonomy' ai fini di questa esercitazione.
Fare clic su Crea.
Ora creare la tassonomia aggiungendo le categorie. Fare clic su Aggiungi una categoria.
Assegnare un nome alla voce categoria padre 'Alimenti' e aggiungere le seguenti categorie figlio:
- Colazione
- Dessert
- Bevande
- Panini
Fare clic su Done nella parte superiore destra della schermata.
Nella pagina Tassonomie selezionare la tassonomia OCEImageGalleryTaxonomy e fare clic su Promuovi nella barra delle azioni per renderla disponibile per l'uso nei repository di asset.

Successivamente, modificare il repository OCEImageGalleryRepository per abilitare la tassonomia OCEImageGalleryTaxonomy per tale repository:

Eseguire il login all'interfaccia Web di Oracle Content Management come amministratore.
Scegliere Contenuto nel menu di navigazione sinistro, quindi scegliere Repositori dalla lista di selezione nell'intestazione della pagina.
Selezionare e modificare il repository OCEImageGalleryRepository.
Nel campo Tassonomie selezionare OCEImageGalleryTaxonomy in modo da poter assegnare categorie da tale tassonomia agli asset del repository OCEImageGalleryRepository.
Fare clic su Salva.

Assegnare quindi categorie di tassonomia a ogni asset immagine nel repository OCEImageGalleryRepository:

Eseguire il login all'interfaccia Web di Oracle Content Management.
Fare clic su Asset nel menu di navigazione a sinistra.
Aprire il repository OCEImageGalleryRepository.
Selezionare uno o più asset immagine, fare clic su Altro nella barra delle azioni, quindi scegliere Categorie dal menu.
Nel pannello Categorie fare clic su Aggiungi categoria. Cercare il nome della categoria nella barra di ricerca o selezionare una categoria dalla struttura gerarchica della tassonomia, quindi fare clic su Aggiungi per assegnare la categoria selezionata. È possibile assegnare più categorie a un asset.
Al termine dell'assegnazione delle tassonomie a tutti gli asset immagine, selezionare tutti gli asset nel repository e pubblicarli nel canale OCEImageGalleryChannel.

Task 2: Creare la Galleria immagine in Next.js

Per utilizzare il contenuto di Oracle Content Management in un'applicazione Next.js, è possibile utilizzare la galleria di immagini Next.js, disponibile come repository open source in GitHub.

Nota: tenere presente che l'uso dell'esempio Next.js è facoltativo e che viene utilizzato in questa esercitazione per iniziare rapidamente. Puoi anche creare la tua applicazione Next.js.

Per creare la galleria di immagini in Next.js:

Duplicare il repository di esempio e installare le dipendenze
Configurare l'applicazione Next.js
Utilizzare l'SDK di Oracle Content Management Content
Utilizzare l'SDK del contenuto per recuperare il contenuto

Duplicare il repository di esempio e installare le dipendenze

L'esempio di blog Next.js è disponibile come repository open source in GitHub.

Sarà prima necessario clonare l'esempio da GitHub al computer locale e modificare la directory nella directory root del repository:

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

Ora che si dispone del codice base, è necessario scaricare le dipendenze per l'applicazione. Eseguire il comando seguente dalla directory root:

npm install

Configurazione dell'applicazione Next.js

In questo esempio di galleria di immagini Next.js, devi configurare alcune informazioni in modo che il tuo SDK di Oracle Content Management Content (e qualsiasi altra richiesta) possa indirizzare l'URL dell'istanza e la versione API corretti con il token di canale corretto. Questi valori vengono utilizzati in script/server-config-utils.js per creare un'istanza di un nuovo client di distribuzione.

Questa applicazione utilizza un file .env.local letto da Next.js e reso disponibile al codice all'interno dell'applicazione con process.env.

Aprire il file .env.local in un editor di testo. Verranno visualizzate le informazioni riportate di seguito.

# 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

Modificare ogni coppia chiave-valore in modo che rifletta l'URL dell'istanza, la versione dell'API a cui si desidera indirizzare e il token canale associato al canale di pubblicazione. Il canale per questa esercitazione è OCEImageGalleryChannel.

Utilizzare l'SDK di Oracle Content Management Content

Oracle Content Management offre un SDK che consente di individuare e utilizzare i contenuti nelle applicazioni. L'SDK viene pubblicato come modulo NPM e il progetto viene gestito in hosting su GitHub.

Per ulteriori informazioni sull'SDK, fare clic qui.

L'SDK è stato registrato come dipendenza runtime di questo progetto nel file package.json.

Utilizzare l'SDK del contenuto per recuperare il contenuto

Ora possiamo utilizzare il kit SDK del contenuto per recuperare il contenuto in modo da renderlo disponibile nell'applicazione Next.js.

La cartella script contiene il codice per ottenere i dati da Oracle Content Management mediante l'SDK del contenuto.

Il file script/server-config-utils.js importa l'SDK del contenuto e quindi crea un client di consegna utilizzando la configurazione specificata in .env.local.

Il comando seguente importa l'SDK:

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

Il comando seguente crea il client di consegna:

return createDeliveryClient(serverconfig);

Il file script/services.js contiene tutto il codice per ottenere i dati per l'applicazione. Esiste una funzione principale per ogni componente della pagina nell'applicazione per ottenere tutti i dati relativi a tale pagina.

Per il rendering delle immagini, service.js fornisce un metodo di supporto per recuperare il set di origini per un asset costruito dalle rendition per l'asset.

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;
    }

Dati home page

La home page richiede diverse chiamate di dati per ottenere tutti i relativi dati:

Per prima cosa carichiamo le tassonomie per il canale specificato in .env.
Per ognuna delle tassonomie, abbiamo tutte le categorie in quella tassonomia.
Per ogni categoria sono disponibili quattro elementi di contenuto.
Per ognuno di questi elementi, otteniamo gli URL di rendition.

Aprire src/scripts/services.js e trovare la funzione getHomePageData() utilizzata per ottenere tutti i dati per la home page.

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() chiama fetchAllTaxonomiesCategories() per ottenere tutte le categorie in tutte le tassonomie.

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() chiama fetchCategoriesForTaxonomyId() per ottenere tutte le categorie in una tassonomia specifica.

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

La funzione addItemsToCategories viene quindi chiamata per aggiungere le quattro voci categoria a ogni categoria.

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));
    }

Infine, getSourceSet visualizzato in precedenza viene chiamato per ottenere gli URL di rendition per ogni elemento.

Dati pagina griglia immagini

La pagina della griglia immagini riceve un ID categoria e richiede diverse chiamate di dati per ottenere tutti i relativi dati:

Recupera tutti gli articoli per la categoria specificata.
Per ogni elemento, recuperarne gli URL di rendition.

Aprire src/scripts/services.js e trovare la funzione getImageGridPageData() utilizzata per ottenere tutti i dati per la pagina della griglia delle immagini.

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,
          };
        },
      );
    }

Chiama fetchItemsForCategory, come la home page, ma senza limiti, in modo che tutti gli elementi vengano restituiti, non solo quattro.

Dopo aver ricevuto le nostre query sui dati, possiamo rendere le risposte nei nostri componenti Next.js.

Componenti Next.js

Next.js si basa su React e React utilizza una tecnologia conosciuta come JSX, che è un'estensione di sintassi simile ad HTML a JavaScript, per il rendering del contenuto. Sebbene sia possibile scrivere JavaScript puro per il rendering dei dati da Oracle Content Management, si consiglia di utilizzare JSX.

L'applicazione della galleria di immagini suddivide ogni pagina in vari componenti più piccoli, alcuni dei quali vengono utilizzati sia nelle pagine della griglia di home e immagini.

Le prossime sezioni forniscono una panoramica del modo in cui Next.js rende la nostra applicazione in ognuno dei nostri componenti:

Cartella delle pagine
Componente indice
Componente galleria
Componente ImageGridPage

Cartella delle pagine

Nel nostro sito vogliamo fornire due percorsi:

La home page, che mostra un elenco di categorie di immagini
Pagina della griglia dell'immagine, che visualizza tutti gli elementi per un determinato ID categoria

Qualsiasi pagina nella directory delle pagine Next.js verrà considerata come un instradamento per l'applicazione.

Componente indice

La home page è costituita da un elenco di categorie per una tassonomia, con un'anteprima di quattro elementi in tale categoria. Viene visualizzato dal componente Indice, disponibile in pagine/index.jsx.

Il componente importa l'API per ottenere i dati dal file services.js.

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

In getStaticProps(), chiamato durante la fase di generazione, il componente ottiene tutti i dati necessari per eseguire il rendering della home page.

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

Componente galleria

Il componente Galleria rappresenta la singola categoria nella lista. Visualizza un'anteprima di quattro elementi della categoria.

Si trova in src/components/Gallery.jsx e riceve tutti i suoi dati sotto forma di proprietà. Non riceve dati aggiuntivi dal server.

Componente ImageGridPage

Il componente Pagina griglia immagini visualizza gli elementi della categoria di cui viene passato l'ID nel componente nell'URL. Viene visualizzato dal componente ArticleListPage, disponibile in pagine/categoria/[id].jsx.

Il componente importa l'API per ottenere i dati dal file services.js.

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

Gli URL per la pagina Griglia immagini sono URL dinamici che contengono l'ID categoria e il nome come percorso, ad esempio i percorsi URL sono

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

Quando Next.js utilizza la generazione statica del sito per le pagine con URL dinamici, chiama getStaticPaths() per ottenere tutti i percorsi per quella pagina.

export async function getStaticPaths() {
      const categories = await fetchAllTaxonomiesCategories();
      return {
        paths: categories.map((category) => ({
          params: { id: `${category.id}-${category.name}` },
        })),
        fallback: true,
      };
    }

La funzione getStaticProps() viene utilizzata per ottenere i dati per una singola istanza della pagina Griglia immagini. L'ID e il nome della categoria vengono ottenuti dal parametro passato al metodo. L'ID categoria viene quindi utilizzato per ottenere tutti i dati necessari per questa pagina.

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,
        },
      };
    }

Task 3: Prepara la tua applicazione per la distribuzione

Dopo aver creato il nostro sito di blog Next.js, dobbiamo vederlo in un server di sviluppo locale in modo da poter eseguire il debug di qualsiasi problema e visualizzare l'anteprima dell'applicazione prima che sia attiva.

Preparare l'applicazione per la distribuzione in due passaggi:

Attiva un server di sviluppo locale
Utilizza script per creare ed eseguire l'applicazione in sviluppo e produzione

Attiva un server di sviluppo locale

È possibile avviare localmente un server di sviluppo eseguendo il comando seguente.

npm run dev

Aprire quindi il browser in uso a http://localhost:3000 per visualizzare il sito in azione.

Nota: per eseguire il pre-riassegnamento delle pagine, vedere la sezione successiva.

Usa script per creare ed eseguire l'applicazione in sviluppo e produzione

Per la produzione, lo script di creazione verrà utilizzato per generare staticamente il sito.

npm run build

Lo script iniziale viene utilizzato per avviare un server Node.js che serve le pagine generate in modo statico.

npm run start

Titolo e informazioni sul copyright

Creare una galleria di immagini in Next.js con Oracle Content Management headless

F49327-01

Ottobre 2021

Autore principale: Oracle Corporation