Crie um Site Mínimo no Next.js com o Oracle Content Management Sem Cabeçalho

Introdução

O Next.js é uma estrutura web de desenvolvimento de front-end React de código aberto que permite funcionalidades como renderização do servidor e geração de sites estáticos para aplicativos Web baseados em React.

Para consumir o conteúdo do Oracle Content Management em um aplicativo Next.js, podemos usar a amostra mínima do Next.js disponível como repositório de código-fonte aberto no GitHub.

Neste tutorial, criaremos um site mínimo simples no Next.js aproveitando o Oracle Content Management como um CMS sem supervisão, bem como seu kit de desenvolvimento de software (SDK) para a entrega de conteúdo em JavaScript. Este exemplo do Next.js está disponível no GitHub.

O tutorial consiste em três tarefas:

1. Preparar o Oracle Content Management
2. Crie o site mínimo no Next.js
3. Prepare seu aplicativo para implantação

Pré-requisitos

Antes de continuar com este tutorial, recomendamos que você leia as seguintes informações primeiro:

• Conceitos-Chave
• Repositórios de Ativos

Para seguir este tutorial, você precisará de:

• uma assinatura do Oracle Content Management
• uma conta do Oracle Content Management com a atribuição de Administrador de Conteúdo
• um computador Windows ou Mac com Node versão 10 ou superior

O que estamos construindo

Com o mínimo do Next.js, você pode recuperar facilmente imagens e outro conteúdo do repositório do Oracle Content Management.

Para dar uma olhada no que estamos construindo, veja aqui o estado final de nosso tutorial, um site básico do Next.js que consome conteúdo do Oracle Content Management:

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

É assim que a página inicial parecerá no fim deste tutorial:

É assim que a página entre em contato conosco parecerá no fim deste tutorial:

Para prosseguir, será necessário ter uma assinatura ativa do Oracle Content Management e efetuar log-in com a atribuição de Administrador de Conteúdo.

Tarefa 1: Preparar o Oracle Content Management

Se você ainda não tiver uma instância do Oracle Content Management, consulte o Início Rápido para saber como se registrar no Oracle Cloud, provisionar uma instância do Oracle Content Management e configurar o Oracle Content Management como um CMS sem supervisão.

Para este tutorial, você precisará criar um modelo de conteúdo. Há um pacote de ativos transferível para download disponível que preencherá seu repositório vazio com tipos de conteúdo e conteúdo associado.

Para preparar o Oracle Content Management:

1. Crie um repositório de canais e ativos.
2. Importar o Pacote de Ativos de Amostras do Oracle Content Management

Criar um Repositório de Canal e Ativos

Primeiro, você precisa criar um canal e um repositório de ativos no Oracle Content Management para publicar conteúdo.

Para criar um canal e um repositório de ativos no Oracle Content Management:

1. Efetue log-in na interface Web do Oracle Content Management como administrador.

2. Escolha Conteúdo no menu de navegação à esquerda e escolha Publicando Canais na lista de seleção no cabeçalho da página.

   

3. No canto superior direito, clique em Criar para criar um novo canal. Nomeie o canal 'OCEMinimalChannel' com a finalidade deste tutorial e mantenha o acesso público. Clique em Salvar para criar o canal.

   

4. Escolha Conteúdo no menu de navegação à esquerda e escolha Repositórios na lista de seleção no cabeçalho da página.

   

5. No canto superior direito, clique em Criar para criar um novo repositório de ativos. Nomeie o repositório de ativos 'OCEMinimalRepository' com a finalidade deste tutorial.

   

6. No campo Publicando Canais, selecione o canal OCEMinimalChannel para indicar ao Oracle Content Management que o conteúdo no repositório OCEMinimalRepository pode ser publicado no canal OCEMinimalChannel. Clique em Salvar quando concluir.

   

Criar um Modelo de Conteúdo

A próxima tarefa é criar um modelo de conteúdo. Você pode usar um destes dois métodos:

• Método 1: Importar o Pacote de Ativos de Amostras do Oracle Content Management
• Método 2: Criar seu próprio modelo de conteúdo

Importar o Pacote de Ativos de Amostras do Oracle Content Management

Você pode fazer download de um pacote de ativos de amostra pré-configurado do Oracle Content Management que contenha todos os tipos de conteúdo e ativos necessários para este tutorial. Se preferir, você também pode criar seu próprio modelo de conteúdo em vez de fazer download do pacote de ativos de amostra.

Você pode fazer upload de uma cópia do conteúdo que estamos usando neste tutorial no Pacote de Ativos de Amostras do Oracle Content Management. Isso permitirá que você experimente os tipos de conteúdo e modifique o conteúdo. Se quiser importar o Pacote de Ativos de Amostras do Oracle Content Management, você poderá fazer download do arquivo compactado do pacote de ativos, OCESamplesAssetPack.zip e extraí-lo para um diretório de sua escolha:

1. Faça download do Oracle Content Management Samples Asset Pack (OCESamplesAssetPack.zip) na página downloads do Oracle Content Management. Extraia o arquivo zip baixado para um local no computador. Após a extração, este local incluirá um arquivo chamado OCEMinimal_data.zip.

2. Efetue log-in na interface Web do Oracle Content Management como administrador.

3. Escolha Conteúdo no menu de navegação à esquerda e escolha Repositórios na lista de seleção no cabeçalho da página. Agora selecione OCEMinimalRepository e clique no botão Importar Conteúdo na barra de ação superior.

   

4. Faça upload do OCEMinimal_data.zip do seu computador local para a pasta Documentos.

   

5. Depois de fazer upload, selecione OCEMinimal_data.zip e clique em OK para importar o conteúdo para o repositório de ativos.

   

6. Após a importação bem-sucedida do conteúdo, navegue até a página Ativos e abra o repositório OCEMinimalRepository. Você verá que todas as imagens relacionadas e os itens de conteúdo foram adicionados ao repositório de ativos.

   

7. Clique em Selecionar Tudo no canto superior esquerdo e em Publicar para adicionar todos os ativos importados ao canal de publicação criado anteriormente, OCEGettingStartedChannel.

   

8. Antes da publicação, é necessário validar todos os ativos. Primeiro adicione OCEMinimalChannel como canal selecionado e, em seguida, clique no botão Validar.

   

9. Depois que os ativos tiverem sido validados, você poderá publicar todos os ativos no canal selecionado clicando no botão Publicar no canto superior direito.

   

Quando terminar, você poderá ver na página Ativos que todos os ativos foram publicados. (Você pode informar pelo ícone acima do nome do ativo.)

Depois de importar o Pacote de Ativos de Amostras do Oracle Content Management, você pode iniciar a construindo o Site Mínimo no Next.js.

Criar seu Próprio Modelo de Conteúdo

Em vez de importar o Pacote de Ativos de Amostras do Oracle Content Management, você também pode criar seu próprio modelo de conteúdo.

Para este tutorial, estamos usando um tipo de conteúdo chamado 'MinimalMain' como o tipo de conteúdo principal para esta amostra. Esse tipo de conteúdo consiste em logotipos de cabeçalho e rodapé e em uma lista de páginas que devem ser incluídas na Marinha.

Para criar tipos de conteúdo para o modelo de conteúdo:

1. Efetue log-in na interface Web do Oracle Content Management como administrador.
2. Escolha Conteúdo no menu de navegação à esquerda e escolha Tipos de Ativos na lista de seleção no cabeçalho da página.
3. Clique em Criar no canto direito superior.
4. Escolha criar um tipo de conteúdo (não um tipo de ativo digital). Repita isso para todos os tipos de conteúdo necessários.

Criaremos três tipos de conteúdo, cada um com seu próprio conjunto de campos:

• MinimalMain
• MinimalPage
• MinimalSection

O primeiro tipo de conteúdo, MinimalMain, deve ter os seguintes campos:

Nome para Exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
headerLogo	Campo de mídia de valor único		headerLogo
footerLogo	Campo de mídia de valor único		footerLogo
páginas	Campo de referência de vários valores		páginas

É assim que sua definição de tipo de conteúdo MinimalMain deve ter a seguinte aparência:

O segundo tipo de conteúdo, MinimalPage, deve ter o seguinte campo:

Nome para Exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
seções	Campo de referência de vários valores		seções

É assim que seu tipo de conteúdo MinimalPage deve ter a seguinte aparência:

O terceiro tipo de conteúdo final, MinimalSection, deve ter os seguintes campos:

Nome para Exibição	Tipo de Campo	Obrigatórias	Nome da Máquina
tipo	Campo de texto de valor único	X	tipo
da coluna Tipo	Campo de texto de valor único		da coluna Tipo
body	Campo de texto grande de valor único		body
imagem	Campo de imagem de valor único		imagem
ações	Campo de conteúdo incorporado de valor único		ações

É assim que seu tipo de conteúdo MinimalSection deve ter a seguinte aparência:

Depois de criar seus tipos de conteúdo, você pode adicionar esses tipos de conteúdo ao repositório criado anteriormente, OCEMinimalRepository:

1. Efetue log-in na interface Web do Oracle Content Management como administrador.
2. Navegue até OCEMinimalRepository.
3. Edite o repositório e, em Tipos de Ativos, especifique os três tipos de conteúdo recém-criados. Clique no botão Salvar para salvar as alterações.

Após adicionar os tipos de conteúdo ao repositório, você poderá abrir o repositório OCEMinimalRepository na página Ativos e começar a criar seus itens de conteúdo para todos os tipos de conteúdo.

Tarefa 2: Criar o Site Mínimo no Próximo.js

Para consumir o conteúdo do Oracle Content Management em um aplicativo Next.js com servidor, podemos usar a amostra de site mínima do Next.js, que está disponível como repositório de código-fonte aberto no GitHub.

Observação: Lembre-se de que o uso da amostra Next.js é opcional e que o usamos neste tutorial para começar rapidamente. Você também pode criar seu próprio aplicativo Next.js.

Para criar o site mínimo em Next.js:

1. Clonar o repositório de amostra e instalar dependências
2. Configurar o aplicativo Next.js
3. Trabalhar com o SDK do Oracle Content Management Content
4. Usar o Content SDK para Obter Conteúdo

Clonar o Repositório de Amostra e Instalar Dependências

A amostra de site mínima do Next.js está disponível como repositório de código-fonte aberto no GitHub.

Primeiro você precisará clonar a amostra do GitHub no seu computador local e alterar seu diretório para a raiz do repositório:

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

Agora que você tem sua base de código, é necessário fazer download de dependências para o aplicativo. Execute o seguinte comando no diretório raiz:

npm install

Configurar o Aplicativo Next.js

Nesta amostra de site mínima do Next.js, você precisa configurar algumas informações para que o Oracle Content Management Content SDK (e quaisquer outras solicitações) possa direcionar o URL de instância correto e a versão da API com o token de canal correto. Esses valores são usados em scripts/server-config-utils.js para instanciar um novo cliente de entrega.

Este aplicativo usa um arquivo .env.local que é lido pelo Next.js e disponibilizado para o código dentro do aplicativo com process.env.

Abra o arquivo .env.local em um editor de texto. Você verá o seguinte:

# 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=ba0efff9c021422cb134c2fd5daf6015

Altere cada par de chave/valor para refletir o URL da sua instância, a versão da API que você deseja direcionar e o token do canal associado ao seu canal de publicação. O canal deste tutorial é OCEMinimalChannel.

Trabalhar com o SDK do Oracle Content Management Content

O Oracle Content Management oferece um SDK para ajudar a descobrir e usar conteúdo em seus aplicativos. O SDK é publicado como um módulo NPM e o projeto é hospedado no GitHub.

Saiba mais sobre o SDK aqui.

O SDK foi registrado como uma dependência de runtime deste projeto no arquivo package.json.

Usar o Content SDK para Obter Conteúdo

Agora podemos aproveitar o Content SDK para extrair o conteúdo para que possamos renderizá-lo em nosso aplicativo Next.js.

O Content SDK usa um objeto DeliveryClient para especificar o ponto final. Você pode fazer todas as solicitações usando esse objeto cliente.

A pasta de scripts contém o código para obter dados do Oracle Content Management usando o Content SDK.

O arquivo scripts/server-config-utils.js importa o Content SDK e cria um cliente de entrega usando a configuração especificada em .env.local.

O seguinte comando importa o SDK:

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

O seguinte comando cria o cliente de entrega:

return createDeliveryClient(serverconfig);

O arquivo script/services.js contém funções para obter os dados deste aplicativo mínimo do Next.js.

O método fetchOceMinimalMain() recupera o tipo de conteúdo MinimalMain com uma barra de mínimo principal.

export async function fetchOceMinimalMain() {
      const data = await getItem('minimalmain', 'fields.headerlogo,fields.footerlogo,fields.pages');
      if (!data.hasError) {
        const { fields } = data;
        const { headerlogo, footerlogo } = fields;
        // Extract the sourceset for the headerImage and footerImage and put it back in the data
        data.headerRenditionURLs = getSourceSet(headerlogo);
        data.footerRenditionURLs = getSourceSet(footerlogo);
      }
      return data;
    }

Para renderizar as imagens, o services.js fornece um método auxiliar para recuperar o conjunto de origens de um ativo que é construído a partir das renderizações do ativo.

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

O método fetchPage() recupera o tipo de conteúdo MinimalPage usando o valor de slug da página.

export async function fetchPage(pageslug) {
      // Get the page details
      const page = await getItem(pageslug, 'fields.sections');
      return page;
    }

O método getRenditionURLs() recupera os urls de renderização para qualquer imagem que possa ser definida em uma seção usando o id dessa imagem.

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

Agora que temos nossas consultas de dados, podemos renderizar as respostas em nossos componentes do Next.js.

Componentes do Next.js

O Next.js é baseado em React e React usa uma tecnologia conhecida como JSX, que é uma extensão de sintaxe semelhante a HTML para JavaScript, para renderizar conteúdo. Embora você possa escrever JavaScript puro para renderizar dados do Oracle Content Management, recomendamos que você use o JSX.

O aplicativo de site mínimo divide cada página em vários componentes menores.

As próximas seções contêm uma visão geral de como o Next.js processa nosso aplicativo em cada um de nossos componentes:

• Pasta Páginas
• Componente Principal
• Componente da Página
• Componentes de cabeçalho e rodapé
• Componente da Seção
• Componente de Erro

Pasta Páginas

Em nosso site, fornecemos uma rota - /page. As solicitações são direcionadas ao componente Principal definido no arquivo pages/page/[..slug]].jsx. A solicitação de caminho raiz é redirecionada para /page especificando um redirecionamento no next.config.js.

  async redirects() {
        return [
          {
            source: '/',
            destination: '/page/',
            permanent: true,
          },
        ]
      }

Todas as páginas têm um cabeçalho, contendo o logotipo e os links da empresa, e um rodapé, contendo um logotipo e ícones de mídia social. As páginas são acessadas por meio de URLs estáticos e obtêm todos os dados necessários antes de passar quaisquer dados relevantes para qualquer componente filho.

O Next.js tratará qualquer página no diretório de páginas como uma rota para o aplicativo.

Componente Principal

Todas as páginas são processadas pelo componente Principal, localizado em pages/page/[..slug]].jsx. Pegar todas as rotas no Next.js são opcionais, incluindo o parâmetro entre colchetes ([[...slug]]). A página raiz que assume como padrão a primeira página da lista de páginas não tem o parâmetro transmitido a ela e, portanto, definimos o parâmetro de slug como opcional.

O componente importa a API para obter dados do arquivo services.js.

import { fetchOceMinimalMain, fetchPage, getRenditionURLs } from '../scripts/services';

Os URLs das páginas são URLs dinâmicos que contêm o slug da página como caminho, exemplos de caminhos de URL são

• /page/home
• /page/contact-us
• /page

Quando o Next.js usa a geração de site estático para páginas com URLs dinâmicos, ele chama getStaticPaths() para obter todos os caminhos dessa página.

export async function getStaticPaths() {
      const appData = await fetchOceMinimalMain();
      const { fields } = appData;
    
      // Generate the paths we want to pre-render based on posts
      const paths = fields.pages.map((page) => ({
        params: { slug: [page.slug] },
      }));
      // Also add the path for the root /
      paths.push({
        params: { slug: [] },
      });
      return {
        paths,
        fallback: false,
      };
    }

A função getStaticProps() é usada para obter os dados de uma única instância da Página. O slug da página é obtido do parâmetro passado para o método. A página é usada para obter todos os dados necessários para essa página.

export async function getStaticProps(context) {
      // fetch the minimal main data
      const appData = await fetchOceMinimalMain();
      // find the slug param from the context. If its null, default to the first page slug
      const { params } = context;
      let { slug } = params;
      if (slug == null) {
        slug = appData.fields.pages[0].slug;
      }
      // fetch the page corresponding to the slug
      const pageData = await fetchPage(slug);
      const { headerRenditionURLs, footerRenditionURLs, fields } = appData;
      const { sections } = pageData.fields;
    
      // for each section in the page, if a image is present, get the corresponding rendition urls
      // and insert it back into the section
      const promises = [];
      sections.forEach((section) => {
        // add a promise to the total list of promises to get any section rendition urls
        if (section.fields.image) {
          promises.push(
            getRenditionURLs(section.fields.image.id)
              .then((renditionURLs) => {
                // eslint-disable-next-line no-param-reassign
                section.renditionURLs = renditionURLs;
              }),
          );
        }
      });
    
      // execute all the promises and return all the data
      await Promise.all(promises);
      return {
        props: {
          headerRenditionURLs,
          footerRenditionURLs,
          pages: fields.pages,
          pageData,
        },
      };
    }

Componente da Página

O componente Página é responsável pela renderização de todas as seções definidas para uma página. Abra o componente Página, localizado nos componentes/Page.jsx. Ele simplesmente utiliza os dados passados do componente Principal. Ele não obtém dados adicionais do servidor. Ele usa o componente Seção para renderizar os dados da seção.

Page.propTypes = {
      pageData: PropTypes.shape().isRequired,
    };

Componentes de cabeçalho e rodapé

O componente Cabeçalho, localizado nos componentes/Header.jsx e no componente Rodapé, localizado nos componentes/Footer.jsx, simplesmente utilize os dados passados para eles do componente Principal. Eles não obtêm dados adicionais do servidor.

Componente da Seção

O componente Seção, localizado nos componentes/Section.jsx, é usado pelo componente Página e é usado para renderizar qualquer item de conteúdo do tipo MinimalSection.

Esse componente tem dados passados do componente Página.

Componente de Erro

O componente Erro, localizado nos componentes/Error.jsx, é utilizado pela Página e pelos componentes Principais. Se houver erros durante a chamada para o servidor, ele os renderizará.

Tarefa 3: Preparar Seu Aplicativo para Implantação

Agora que construímos nosso site de blog Next.js, precisamos vê-lo em um servidor de desenvolvimento local para que possamos depurar quaisquer problemas e visualizar o aplicativo antes de ele entrar em operação.

Prepare o aplicativo para implantação em duas etapas:

1. Criou um servidor de desenvolvimento local
2. Usar scripts para criar e executar o aplicativo em desenvolvimento e produção

Desenvolver um Servidor de Desenvolvimento Local

Você pode iniciar um servidor de desenvolvimento localmente executando o comando a seguir.

npm run dev

Em seguida, abra seu navegador para http://localhost:3000 para ver seu site em ação.

Observação: Isso não fará pré-render as páginas. Para pré-render as páginas, consulte a próxima seção.

Use Scripts para Criar e Executar o Aplicativo em Desenvolvimento e Produção

Para produção, o script de construção seria usado para gerar estaticamente o site.

npm run build

O script inicial é usado para iniciar um servidor Node.js atendendo às páginas geradas estaticamente.

npm run start

---

Título e Informações de Copyright

Crie um Site Mínimo no Next.js com o Oracle Content Management Sem Cabeçalho

F49315-01

Outubro de 2021

Copyright © 2021, Oracle and/or its affiliates.

Autor Principal: Oracle Corporation