Aplicación Next.js

Las aplicaciones de ejemplo son una buena manera de explorar las capacidades sin objetivos de Adobe Experience Manager (AEM). Esta aplicación Next.js muestra cómo consultar contenido mediante las API de GraphQL AEM mediante consultas persistentes. El cliente AEM sin encabezado para JavaScript se utiliza para ejecutar las consultas persistentes de GraphQL que alimentan la aplicación.

Aplicación Next.js con AEM sin encabezado

Consulte la código fuente en GitHub

Requisitos previos

Las siguientes herramientas deben instalarse localmente:

AEM requisitos

La aplicación Next.js funciona con las siguientes opciones de implementación AEM. Todas las implementaciones requieren WKND compartido v2.1.0+, Sitio WKND v2.1.0+o Complemento de demostración de referencia para instalar en el entorno as a Cloud Service AEM.

Este ejemplo de aplicación Next.js está diseñada para conectarse a AEM Publish servicio.

Requisitos de AEM Author

Next.js está diseñado para conectarse a AEM Publish y acceder a contenido no protegido. El archivo Next.js se puede configurar para conectarse a AEM Author a través del .env propiedades descritas a continuación. Las imágenes proporcionadas por AEM Author requieren autenticación y, por lo tanto, el usuario que accede a la aplicación Next.js también debe iniciar sesión en AEM Author.

Utilización

  1. Clonar el adobe/aem-guides-wknd-graphql repositorio:

    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Edite el aem-guides-wknd-graphql/next-js/.env.local archivo y conjunto NEXT_PUBLIC_AEM_HOST al servicio AEM.

    # AEM service
    NEXT_PUBLIC_AEM_HOST=https://publish-p123-e456.adobeaemcloud.com/
    ...
    

    Si se conecta al servicio AEM Author, la autenticación debe proporcionarse, ya que el servicio AEM Author es seguro de forma predeterminada.

    Para utilizar un conjunto de cuentas de AEM local AEM_AUTH_METHOD=basic y proporcione el nombre de usuario y la contraseña en la variable AEM_AUTH_USER y AEM_AUTH_PASSWORD propiedades.

    ...
    # The variables are not prefixed with NEXT_PUBLIC so they are only available server-side
    AEM_AUTH_METHOD=basic
    AEM_AUTH_USER=aem-user-account
    AEM_AUTH_PASSWORD=password-for-the-aem-user-account
    

    Para usar una AEM token de desarrollo local as a Cloud Service set AEM_AUTH_METHOD=dev-token y proporcione el valor completo del token de desarrollo en la variable AEM_AUTH_DEV_TOKEN propiedad.

    ...
    # The variables are not prefixed with NEXT_PUBLIC so they are only available server-side
    AEM_AUTH_METHOD=dev-token
    AEM_AUTH_DEV_TOKEN=my-dev-token
    
  3. Edite el aem-guides-wknd-graphql/next-js/.env.local archivo y validar NEXT_PUBLIC_AEM_GRAPHQL_ENDPOINT se establece en el extremo correspondiente AEM GraphQL.

    Al usar WKND compartido o Sitio WKND, use el wknd-shared Punto final de la API de GraphQL.

    ...
    NEXT_PUBLIC_AEM_GRAPHQL_ENDPOINT=wknd-shared
    ...
    

    Al usar Complemento de demostración de referencia, use el aem-demo-assets Punto final de la API de GraphQL.

    ...
    NEXT_PUBLIC_AEM_GRAPHQL_ENDPOINT=aem-demo-assets
    ...
    
  4. Abra un símbolo del sistema e inicie la aplicación Next.js mediante los siguientes comandos:

    $ cd aem-guides-wknd-graphql/next-js
    $ npm install
    $ npm run dev
    
  5. Una nueva ventana del explorador abre la aplicación Next.js en http://localhost:3000

  6. La aplicación Next.js muestra una lista de aventuras. Al seleccionar una aventura, se abren sus detalles en una nueva página.

El código

A continuación se muestra un resumen de cómo se crea la aplicación Next.js, cómo se conecta a AEM sin encabezado para recuperar contenido mediante consultas persistentes de GraphQL y cómo se presentan esos datos. El código completo se puede encontrar en GitHub.

Consultas persistentes

Siguiendo AEM prácticas recomendadas sin encabezado, la aplicación Next.js utiliza AEM consultas persistentes de GraphQL para consultar datos de aventura. La aplicación utiliza dos consultas persistentes:

  • wknd/adventures-all consulta persistente, que devuelve todas las aventuras en AEM con un conjunto abreviado de propiedades. Esta consulta persistente impulsa la lista de aventuras de la vista inicial.
# Retrieves a list of all adventures
{
    adventureList {
        items {
            _path
            slug
            title
            price
            tripLength
            primaryImage {
                ... on ImageRef {
                _path
                mimeType
                width
                height
                }
            }
        }
    }
}
  • wknd/adventure-by-slug consulta persistente, que devuelve una sola aventura de slug (una propiedad personalizada que identifica de forma exclusiva una aventura) con un conjunto completo de propiedades. Esta consulta persistente potencia las vistas de detalles de aventura.
# Retrieves an adventure Content Fragment based on it's slug
# Example query variables:
# {"slug": "bali-surf-camp"}
# Technically returns an adventure list but since the the slug
# property is set to be unique in the CF Model, only a single CF is expected

query($slug: String!) {
  adventureList(filter: {
        slug: {
          _expressions: [ { value: $slug } ]
        }
      }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          mimeType
          width
          height
        }
      }
      description {
        json
        plaintext
      }
      itinerary {
        json
        plaintext
      }
    }
    _references {
      ...on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

Ejecutar consulta persistente de GraphQL

AEM las consultas persistentes se ejecutan a través de GET HTTP y, por lo tanto, la variable AEM cliente sin encabezado para JavaScript se usa para ejecutar las consultas de GraphQL persistentes con AEM y cargue el contenido de aventura en la aplicación.

Cada consulta persistente tiene una función correspondiente en src/lib//aem-headless-client.js, que llama al punto final de AEM GraphQL y devuelve los datos de aventura.

Cada función, a su vez, invoca la variable aemHeadlessClient.runPersistedQuery(...), ejecutando la consulta de GraphQL persistente.

// src/lib/aem-headless-client.js

...
/**
 * Invokes the 'adventures-all` persisted query using the parameterizable namespace.
 *
 * @returns a GraphQL response of all adventures.
 */
async getAllAdventures() {
  const queryAdventuresAll = process.env.NEXT_PUBLIC_AEM_GRAPHQL_ENDPOINT + '/adventures-all';

  try {
    return await this.aemHeadlessClient.runPersistedQuery(queryAdventuresAll);
  } catch(e) {
    console.error(e)
  }
}

// And so on, and so forth ...

async getAdventureSlugs() { ... }

async getAdventuresBySlug(slug) { ... }
...

Páginas

La aplicación Next.js utiliza dos páginas para presentar los datos de aventura.

  • src/pages/index.js

    Usos getServerSideProps() de Next.js para llamar a getAllAdventures() y muestra cada aventura como una tarjeta.

    El uso de getServerSiteProps() permite la representación del lado del servidor de esta página de Next.js.

  • src/pages/adventures/[...slug].js

    A Ruta dinámica de Next.js que muestra los detalles de una sola aventura. Esta ruta dinámica recupera previamente los datos de cada aventura utilizando getStaticProps() de Next.js mediante una llamada a getAdventureBySlug(..) usando la variable slug parámetro transferido a través de la selección de aventura en la variable adventures/index.js página.

    La ruta dinámica puede recuperar previamente los detalles de todas las aventuras mediante getStaticPaths() de Next.js y rellenar todas las permutaciones de ruta posibles en función de la lista completa de aventuras devueltas por la consulta de GraphQL getAdventurePaths()

    El uso de getStaticPaths() y getStaticProps(..) permitió la generación estática del sitio de estas páginas de Next.js.

Configuración de implementación

Las aplicaciones de Next.js, especialmente en el contexto del procesamiento del lado del servidor (SSR) y la generación del lado del servidor (SSG), no requieren configuraciones de seguridad avanzadas como el uso compartido de recursos de origen cruzado (CORS).

Sin embargo, si Next.js realiza solicitudes HTTP a AEM desde el contexto del cliente, pueden ser necesarias configuraciones de seguridad en AEM. Consulte la Tutorial de implementación de aplicación de una sola página AEM sin encabezado para obtener más información.

En esta página