Cree un blog en Next.js con Oracle Content Management sin cabecera

Introducción

Next.js es un marco web de desarrollo de front-end de React de código abierto que permite funciones como la representación del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Pero, ¿qué sucede cuando se necesita un sistema de gestión de contenido (CMS) para servir todo su contenido? Afortunadamente, Oracle Content Management, con sus completas capacidades de CMS sin cabecera, cuenta con una solución elegante para sus necesidades de administración y gobernanza de contenido.

En este tutorial, crearemos un blog sencillo en Next.js aprovechando Oracle Content Management como un CMS sin cabecera, así como su kit de desarrollo de software (SDK) para la entrega de contenido en JavaScript. Este ejemplo Next.js está disponible en GitHub.

El tutorial consta de tres tareas:

1. Preparación de Oracle Content Management
2. Cree el blog en Next.js
3. Preparar la aplicación para su despliegue

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

• conceptos clave
• Repositorios de activos

Para seguir este tutorial, necesitará:

• una suscripción a Oracle Content Management
• Una cuenta de Oracle Content Management con el rol de administrador de contenido
• un equipo Windows o Mac con la versión 10 del nodo o superior

Lo que estamos construyendo

Nuestro blog consistirá en un sitio de tres páginas que permite a los visitantes explorar artículos de blog organizados en temas. La primera página, la página de inicio, consistirá en marca (nombre y logotipo de la compañía), algunos enlaces y una lista de temas de blog.

Para ver lo que estamos creando, aquí se muestra el estado final de nuestro tutorial, un blog básico Next.js que consume contenido de Oracle Content Management:

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

Esto es el aspecto que tendrá la página inicial al final de este tutorial:

La segunda página, la página de tema, muestra las vistas previas de cada artículo de blog que pertenece al tema. A continuación, se muestra el aspecto de una página de tema individual:

Por último, la página de artículo presenta el artículo final del blog, incluida información sobre el autor del blog. A continuación, se muestra cómo se verá una página de artículo individual:

Para continuar, deberá tener una suscripción activa a Oracle Content Management y conectarse con el rol de administrador de contenido.

Tarea 1: Preparación de Oracle Content Management

Si aún no tiene una instancia de Oracle Content Management, consulte Inicio rápido para obtener información sobre cómo registrarse en Oracle Cloud, aprovisionar una instancia de Oracle Content Management y configurar Oracle Content Management como CMS sin cabecera.

Para este tutorial, necesitará crear un modelo de contenido de dos formas. Hay un paquete de activos descargable disponible que llenará su repositorio vacío con tipos de contenido y contenido asociado, o puede crear su propio contenido y modelo de contenido.

Para preparar Oracle Content Management:

1. Cree un canal y un repositorio de activos.
2. Cree un modelo de contenido mediante uno de los dos métodos siguientes:
   • Método 1: Importación del paquete de activos de muestras de Oracle Content Management
   • Método 2: Crear su propio modelo de contenido

Crear un canal y un repositorio de activos

Primero debe crear un canal y un repositorio de activos en Oracle Content Management para poder publicar contenido.

Para crear un canal y un repositorio de activos en Oracle Content Management:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.

2. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Publicar canales en la lista de selección de la cabecera de página.

   

3. En la esquina superior derecha, haga clic en Crear para crear un nuevo canal. Asigne un nombre al canal 'OCEGettingStartedChannel' para este tutorial y mantenga el acceso público. Haga clic en Guardar para crear el canal.

   

4. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página.

   

5. En la esquina superior derecha, haga clic en Crear para crear un nuevo repositorio de activos. Asigne al repositorio de activos el nombre 'OCEGettingStartedRepository' para que realice este tutorial.

   

6. En el campo Canales de publicación, seleccione el canal OCEGettingStartedChannel para indicar a Oracle Content Management que el contenido del repositorio OCEGettingStartedRepository se puede publicar en el canal OCEGettingStartedChannel. Haga clic en Guardar cuando haya terminado.

   

Creación de un modelo de contenido

La siguiente tarea es crear un modelo de contenido. Puede utilizar uno de los siguientes métodos:

• Método 1: Importación del paquete de activos de muestras de Oracle Content Management
• Método 2: Crear su propio modelo de contenido

Importación del Paquete de Activos de Muestras de Oracle Content Management

Puede descargar un paquete de activos de ejemplo de Oracle Content Management preconfigurado que contiene todos los tipos de contenido y activos necesarios para este tutorial. Si lo prefiere, también puede crear su propio modelo de contenido en lugar de descargar el paquete de activos de ejemplo.

Puede cargar una copia del contenido que estamos utilizando en este tutorial desde el paquete de activos de muestras de Oracle Content Management. Esto le permitirá experimentar con los tipos de contenido y modificar el contenido. Si desea importar el paquete de activos de muestras de Oracle Content Management, puede descargar el archivo de paquete de activos, OCESamplesAssetPack.zip, y extraerlo a un directorio de su elección:

1. Descargue el paquete de activos de muestras de Oracle Content Management (OCESamplesAssetPack.zip) desde la página descargas de Oracle Content Management. Extraiga el archivo zip descargado en una ubicación de la computadora. Después de la extracción, esta ubicación incluirá un archivo denominado OCEGettingStarted_data.zip.

2. Conéctese a la interfaz web de Oracle Content Management como administrador.

3. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Repositorios en la lista de selección de la cabecera de página. Ahora seleccione OCEGettingStartedRepository y haga clic en el botón Importar contenido de la barra de acción superior.

   

4. Cargue OCEGettingStarted_data.zip desde su equipo local a la carpeta Documents.

   

5. Una vez cargado, seleccione OCEGettingStarted_data.zip y haga clic en Aceptar para importar el contenido en el repositorio de activos.

   

6. Una vez que el contenido se haya importado correctamente, navegue a la página Activos y abra el repositorio OCEGettingStartedRepository. Verá que todas las imágenes y los elementos de contenido relacionados se han agregado ahora al repositorio de activos.

   

7. Haga clic en Seleccionar todo en la parte superior izquierda y, a continuación, en Publicar para agregar todos los activos importados al canal de publicación que ha creado anteriormente, OCEGettingStartedChannel.

   

8. Antes de la publicación, debe validar todos los activos. Primero agregue OCEGettingStartedChannel como canal seleccionado y, a continuación, haga clic en el botón Validar.

   

9. Después de validar los activos, puede publicar todos los activos en el canal seleccionado haciendo clic en el botón Publicar en la esquina superior derecha.

   

Cuando termine, puede ver en la página Activos que se han publicado todos los activos. (Puede indicar el icono encima del nombre del activo).

Después de importar el paquete de activos de muestras de Oracle Content Management, puede empezar a crear el blog en Next.js.

Crear su propio modelo de contenido

En lugar de importar el paquete de activos de muestras de Oracle Content Management, también puede crear su propio modelo de contenido.

Para este tutorial, estamos usando un tipo de contenido llamado 'OCEGettingStartedHomePage' para crear la página de inicio para nuestro blog. Esta página de inicio consta de marcas (nombre y logotipo de la compañía), algunas URL para enlaces y una lista de temas de blog que se deben incluir en la página.

Para crear tipos de contenido para el modelo de contenido:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Seleccione Contenido en el menú de navegación de la izquierda y, a continuación, seleccione Tipos de activo en la lista de selección de la cabecera de página.
3. Haga clic en Crear en la esquina superior derecha.
4. Elija crear un tipo de contenido (no un tipo de activo digital). Repita esta operación para todos los tipos de contenido necesarios.

Crearemos cuatro tipos de contenido, cada uno con su propio conjunto de campos:

• OCEGettingStartedHomePage
• OCEGettingStartedTopic
• OCEGettingStartedAuthor
• OCEGettingStartedArticle

El primer tipo de contenido, OCEGettingStartedHomePage, debe tener los siguientes campos:

Nombre Mostrado	Tipo de campo	necesario	Nombre de máquina
Nombre de compañía	Campo de texto de valor único	X	company_name
Logo de compañía	Campo de texto de valor único	X	company_logo
Temas	Campo de referencia de varios valores	X	Temas
URL de Contacto	Campo de texto de valor único	X	contact_url
Acerca de URL	Campo de texto de valor único	X	about_url

Esto es lo que debería tener la definición de tipo de contenido OCEGettingStartedHomePage:

El segundo tipo de contenido, OCEGettingStartedTopic, debe tener el siguiente campo:

Nombre Mostrado	Tipo de campo	necesario	Nombre de máquina
Vista en miniatura	Campo de imagen de valor único	X	vista en miniatura

Este es el aspecto del tipo de contenido OCEGettingStartedTopic:

El tercer tipo de contenido, OCEGettingStartedAuthor, debe tener los siguientes campos:

Nombre Mostrado	Tipo de campo	necesario	Nombre de máquina
Avatar	Campo de imagen de valor único	X	avatar

Este es el aspecto del tipo de contenido OCEGettingStartedAuthor:

El cuarto y último tipo de contenido, OCEGettingStartedArticle, deben tener los siguientes campos:

Nombre Mostrado	Tipo de campo	necesario	Nombre de máquina
Fecha de publicación	Campo de fecha de valor único	X	published_name
Autor	Campo de referencia de valor único	X	autor
Imagen	Campo de imagen de valor único	X	imagen
Leyenda de Imagen	Campo de texto de valor único	X	image_caption
Contenido de artículo	Campo de texto grande de valor único	X	article_content
Tema	Campo de referencia de valor único	X	Tema

Este es el aspecto del tipo de contenido OCEGettingStartedArticle:

Una vez creados los tipos de contenido, puede agregar estos tipos de contenido al repositorio que creó anteriormente, OCEGettingStartedRepository:

1. Conéctese a la interfaz web de Oracle Content Management como administrador.
2. Navegue hasta OCEGettingStartedRepository.
3. Edite el repositorio y, en Tipos de activos, especifique los cuatro tipos de contenido recién creados. Haga clic en el botón Save (Guardar) para guardar los cambios.

Después de agregar los tipos de contenido al repositorio, puede abrir el repositorio OCEGettingStartedRepository en la página Activos e iniciar la creación de los elementos de contenido para todos los tipos de contenido.

Tarea 2: Crear el blog en Next.js

Para consumir nuestro contenido de Oracle Content Management en una aplicación Next.js representada en el servidor, podemos utilizar la muestra del blog Next.js, que está disponible como repositorio de código abierto en GitHub.

Nota: Recuerde que el uso de la muestra Next.js es opcional y lo utilizamos en este tutorial para comenzar rápidamente. También puede crear su propia aplicación Next.js.

Para construir el blog en Next.js:

1. Clonar el repositorio de ejemplo e instalar dependencias
2. Configurar la aplicación Next.js
3. Trabajar con el SDK de Oracle Content Management Content
4. Utilizar el SDK de contenido para recuperar el contenido

Clonación del repositorio de ejemplo e instalación de dependencias

La muestra del blog Next.js está disponible como repositorio de código abierto en GitHub.

Primero debe clonar el ejemplo de GitHub a su equipo local y cambiar el directorio a la raíz del repositorio:

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

Ahora que tiene su base de código, necesita descargar dependencias para la aplicación. Ejecute el siguiente comando desde el directorio raíz:

npm install

Configurar la aplicación Next.js

En esta muestra de blog Next.js, debe configurar algunas partes de información para que el SDK de Oracle Content Management Content (y cualquier otra solicitud) pueda dirigirse a la URL de instancia y la versión de API correctas con el token de canal correcto. Estos valores se utilizan en scripts/server-config-utils.js para instanciar un nuevo cliente de entrega.

Esta aplicación utiliza un archivo .env.local leído por Next.js y puesto a disposición del código dentro de la aplicación con process.env.

Abra el archivo .env.local en un editor de texto. Verá la siguiente información:

# 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

Cambie cada par clave-valor para reflejar su URL de instancia, la versión de API que desea dirigir y el token de canal asociado a su canal de publicación. El canal para este tutorial es OCEGettingStartedChannel.

Trabajar con el SDK de Oracle Content Management Content

Oracle Content Management ofrece un SDK para ayudar a detectar y utilizar contenido en las aplicaciones. El SDK se publica como módulo NPM y el proyecto se aloja en GitHub.

Obtenga más información sobre el SDK aquí.

El SDK se ha registrado como una dependencia de tiempo de ejecución de este proyecto en el archivo package.json.

Utilizar el SDK de contenido para recuperar el contenido

Ahora podemos aprovechar el SDK de contenido para recuperar contenido para poder presentarlo en nuestra aplicación Next.js.

La carpeta de scripts contiene el código para obtener datos de Oracle Content Management mediante el SDK de contenido.

El archivo scripts/server-config-utils.js importa el SDK de contenido y, a continuación, crea un cliente de entrega mediante la configuración especificada en .env.local.

El siguiente comando importa el SDK:

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

El siguiente comando crea el cliente de entrega:

return createDeliveryClient(serverconfig);

El archivo scripts/services.js contiene todo el código para obtener datos para la aplicación. Hay una función principal para cada componente de página de la aplicación para obtener todos los datos de esa página.

Para la representación de imágenes, services.js proporciona un método auxiliar para recuperar el juego de orígenes para un activo que se crea a partir de las representaciones del activo.

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

Datos de página inicial

La página inicial necesita varias llamadas de datos para obtener todos sus datos:

1. En primer lugar, consultamos los elementos del canal especificado en .env.local.
2. Para cada uno de los elementos de tema, recuperamos sus detalles.

Abra scripts/services.js y busque la función getTopicsListPageData(), que obtiene todos los datos de la página inicial.

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

La función fetchHomePage(), llamada por la función getTopicsListPageData(), obtiene todos los elementos del canal. Se obtiene el ID del logotipo, el nombre de la compañía, las URL de contacto y de encendido, y una lista de temas.

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

A continuación, se llama a la función fetchTopic() para cada ID de tema a fin de obtener los detalles completos del tema.

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() también llama a getRenditionURLs() para obtener la URL de la imagen que se va a presentar.

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

Datos de página de tema

Next.js utiliza la generación de sitios estáticos para pre-representar cada página en la aplicación. Las rutas de cada página de tema contienen el ID de tema. Abra scripts/services.js y busque la función fetchTopicIds(), que se utiliza para obtener todos los ID de tema.

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

Una página de tema recibe un ID de tema y necesita varias llamadas de datos para obtener todos sus datos:

1. Obtener el nombre del tema
2. Obtener todos los artículos del tema especificado.
3. Para cada artículo, obtenga sus URL de representación.

Busque la función fetchTopicName(topicId), que se utiliza para obtener el nombre del tema.

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

Busque la función fetchTopicArticles(topicId), que obtiene los datos de artículos para la página del tema.

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

El método fetchTopicArticles() también utiliza getRenditionURLs() como se ha visto anteriormente para obtener la imagen del artículo.

Datos de la Página de Artículo

Las rutas de cada página de artículo contienen el ID de artículo. Abra scripts/services.js y busque la función fetchAllArticlesSimple(), que se utiliza para obtener todos los ID de artículo utilizados al presentar previamente cada página de artículo.

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() llama a fetchTopicArticlesSimple() para obtener una lista simplificada de artículos.

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

Una página de artículo recibe un ID de artículo y requiere varias llamadas de datos para obtener todos sus datos:

1. Obtenga los detalles del artículo especificado.
2. Para cada artículo, obtenga sus URL de representación.

Busque la función fetchArticleDetails(articleId), que obtiene los datos de la página de artículo. El método utiliza la función getRenditionURL(), que obtiene la imagen del artículo y también utiliza la función getMediumRenditionURL() para obtener la imagen del autor.

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

El método fetchArticleDetails() también utiliza getRenditionURLs() como se ha visto anteriormente para obtener la imagen de avatar.

Ahora que tenemos nuestras consultas de datos, podemos presentar las respuestas en nuestros componentes Next.js.

Componentes Next.js

Next.js se basa en React y React utiliza una tecnología conocida como JSX, que es una extensión de sintaxis similar a HTML a JavaScript, para representar contenido. Aunque puede escribir JavaScript puro para representar datos de Oracle Content Management, recomendamos que utilice JSX.

La aplicación del blog desglosa cada página en una serie de componentes más pequeños.

En las próximas secciones se ofrece una visión general de cómo Next.js presenta nuestra aplicación en cada uno de nuestros componentes:

• Carpeta de Páginas
• Componente de índice
• Componente de cabecera
• Componente TopicsListItem
• Componente ArticleListPage
• Componente ArticesListItem
• Componente ArticleDetailsPage
• Componentes de rutas de navegación y rutas de navegación

Carpeta de Páginas

En nuestro sitio, queremos ofrecer tres rutas:

• Página inicial, que consta de la lista de temas
• Página de tema, que muestra todos los artículos del tema seleccionado
• Página de artículo individual, que muestra el artículo seleccionado

Cualquier página del directorio de páginas Next.js tratará como una ruta para la aplicación.

Componente de índice

La página inicial consta de una lista compuesta por temas individuales. Se representa con el componente Index, ubicado en pages/index.jsx.

El componente importa la API para obtener datos del archivo services.js.

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

En getStaticProps(), llamado durante el tiempo de creación, el componente obtiene todos los datos necesarios para representar la página inicial.

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

Componente de cabecera

El componente Índice utiliza el componente Cabecera para mostrar el título de la compañía, el logotipo de la compañía y los vínculos Contacto/Acerca de nosotros.

Se encuentra en src/components/Header.jsx y recibe todos sus datos como propiedades. No obtiene datos adicionales del servidor.

Componente TopicsListItem

El componente Index utiliza el componente TopicsListItem para mostrar el tema individual en la lista.

El componente TopicsListItem, ubicado en src/components/TopicsListItem.jsx, recibe todos sus datos como propiedades. No obtiene datos adicionales del servidor.

Componente ArticleListPage

La página Tema muestra los artículos del tema cuyo ID se transfiere al componente en la URL. Se representa mediante el componente ArticleListPage, ubicado en pages/articles/[id].jsx.

El componente importa la API para obtener datos del archivo services.js.

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

Las URL de la página Temas son URL dinámicas que contienen el ID de tema como ruta; por ejemplo, las rutas de URL son

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

Cuando Next.js utiliza la generación de sitios estáticos para páginas con URL dinámicas, llama a getStaticPaths() para obtener todas las rutas de esa página.

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 función getStaticProps() se utiliza para obtener los datos de una única instancia de la página Temas. El ID de tema se obtiene del parámetro transferido al método. El ID de tema se utiliza para obtener todos los datos necesarios para esta página.

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

Componente ArticesListItem

El componente ArticleListPage utiliza el componente ArticlesListItem para mostrar los artículos individuales en la lista.

El componente ArticlesListItem se encuentra en src/components/ArticlesListItem.jsx y recibe todos sus datos como propiedades. No obtiene datos adicionales del servidor.

Componente ArticleDetailsPage

La página Artículo muestra detalles del artículo cuyo ID se transfiere a la URL. Se presenta en el componente ArticleDetailsPage, ubicado en pages/article/[id].jsx.

El componente importa la API para obtener datos del archivo services.js.

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

Las URL de la página de artículo son URL dinámicas que contienen el ID de artículo como ruta; por ejemplo, las rutas de URL son

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

Cuando Next.js utiliza la generación de sitios estáticos para páginas con URL dinámicas, llama a getStaticPaths() para obtener todas las rutas de esa página.

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 función getStaticProps() se utiliza para obtener los datos de una única instancia de la página Artículo. El ID de artículo se obtiene del parámetro transferido al método. El ID de artículo se utiliza para obtener todos los datos necesarios para esta página.

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

Componentes de rutas de navegación y rutas de navegación

Tanto los componentes Index como ArticleDetailsPage utilizan los componentes Breadcrumbs y Breadcrumb para mostrar las rutas de navegación en la parte superior de la página, lo que permite al usuario volver a la página Topic o a la página inicial. Ambos componentes reciben todos sus datos como propiedades; no obtienen datos adicionales del servidor.

Tarea 3: Preparación de la aplicación para el despliegue

Ahora que hemos creado nuestro sitio de blog Next.js, tenemos que verlo en un servidor de desarrollo local para que podamos depurar cualquier problema y obtener una vista previa de la aplicación antes de que entre en marcha.

Prepare la aplicación para el despliegue en dos pasos:

1. Acceder a un servidor de desarrollo local
2. Utilizar scripts para crear y ejecutar la aplicación en desarrollo y producción

Aceleración de un Servidor de Desarrollo Local

Puede iniciar un servidor de desarrollo localmente ejecutando el siguiente comando.

npm run dev

A continuación, abra el explorador a http://localhost:3000 para ver el sitio en acción.

Nota: Esta acción no preemitirá las páginas. Para pre-representar las páginas, consulte la sección siguiente.

Uso de scripts para crear y ejecutar la aplicación en desarrollo y producción

Para producción, el script de creación se utilizaría para generar el sitio de forma estática.

npm run build

El script de inicio se utiliza para iniciar un servidor Node.js que sirve las páginas generadas estáticamente.

npm run start

---

Título e Información de Copyright

Cree un blog en Next.js con Oracle Content Management sin cabecera

F49313-01

Octubre de 2021

Copyright © 2021, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation