Next.js-App

[AEM Headless as a Cloud Service]{class="badge informative"}

Beispielanwendungen eignen sich hervorragend, um die Headless-Funktionen von Adobe Experience Manager (AEM) zu erkunden. Diese Next.js-App zeigt, wie Inhalte mit den AEM GraphQL-APIs unter Verwendung persistierter Abfragen abgefragt werden können. Der AEM Headless-Client für JavaScript wird verwendet, um die von GraphQL gespeicherten Abfragen auszuführen, die die App antreiben.

Sie finden den Quell-Code auf GitHub.

Voraussetzungen prerequisites

Folgende Tools sollten lokal installiert werden:

AEM-Anforderungen

Die Next.js-App funktioniert mit den folgenden AEM-Bereitstellungsoptionen. Alle Bereitstellungen erfordern, dass WKND Shared v3.0.0+ oder die WKND-Site v3.0.0+ in der AEM as a Cloud Service-Umgebung installiert werden.

Diese Next.js-Beispiel-App ist für die Verbindung mit dem AEM Publish-Service konzipiert.

AEM Author-Anforderungen

Next.js wurde entwickelt, um eine Verbindung zum AEM Publish-Service herzustellen und auf ungeschützte Inhalte zuzugreifen. Next.js kann so konfiguriert werden, dass eine Verbindung zu AEM Author über die unten beschriebenen .env-Eigenschaften hergestellt wird. Bilder, die von AEM Author bereitgestellt werden, erfordern eine Authentifizierung. Daher muss der Benutzende, der auf die Next.js-App zugreift, auch bei AEM Author angemeldet sein.

Informationen zur Verwendung

Der Code

Nachstehend finden Sie eine Zusammenfassung dazu, wie die Next.js-App erstellt wurde, wie sie eine Verbindung zu AEM Headless herstellt, um mithilfe von durch GraphQL persistierten Abfragen Inhalte abzurufen und wie diese Daten dargestellt werden. Den vollständigen Code finden Sie auf GitHub.

Persistierte Abfragen

Gemäß den Best Practices von AEM Headless verwendet die Next.js-App AEM GraphQL persistierte Abfragen, um Adventure-Daten abzufragen. Die App verwendet zwei persistierte Abfragen:

# Retrieves a list of all Adventures
#
# Optional query variables:
# - { "offset": 10 }
# - { "limit": 5 }
# - {
#    "imageFormat": "JPG",
#    "imageWidth": 1600,
#    "imageQuality": 90
#   }
query ($offset: Int, $limit: Int, $sort: String, $imageFormat: AssetTransformFormat=JPG, $imageWidth: Int=1200, $imageQuality: Int=80) {
  adventureList(
    offset: $offset
    limit: $limit
    sort: $sort
    _assetTransform: {
      format: $imageFormat
      width: $imageWidth
      quality: $imageQuality
      preferWebp: true
  }) {
    items {
      _path
      slug
      title
      activity
      price
      tripLength
      primaryImage {
        ... on ImageRef {
          _path
          _dynamicUrl
        }
      }
    }
  }
}

# Retrieves an Adventure Fragment based on it's unique slug.
#
# Required query variables:
# - {"slug": "bali-surf-camp"}
#
# Optional query variables:
# - {
#     "imageFormat": "JPG",
#     "imageSeoName": "my-adventure",
#     "imageWidth": 1600,
#     "imageQuality": 90
#   }
#
# This query returns an adventure list but since the the slug property is set to be unique in the Content Fragment Model, only a single Content Fragment is expected.

query ($slug: String!, $imageFormat:AssetTransformFormat=JPG, $imageSeoName: String, $imageWidth: Int=1200, $imageQuality: Int=80) {
  adventureList(
    filter: {slug: {_expressions: [{value: $slug}]}}
    _assetTransform: {
      format: $imageFormat
      seoName: $imageSeoName
      width: $imageWidth
      quality: $imageQuality
      preferWebp: true
  }) {
    items {
      _path
      title
      slug
      activity
      adventureType
      price
      tripLength
      groupSize
      difficulty
      price
      primaryImage {
        ... on ImageRef {
          _path
          _dynamicUrl
        }
      }
      description {
        json
        plaintext
        html
      }
      itinerary {
        json
        plaintext
        html
      }
    }
    _references {
      ... on AdventureModel {
        _path
        slug
        title
        price
        __typename
      }
    }
  }
}

Durchführen einer GraphQL-persistierten Abfrage

Die persistierten Abfragen von AEM werden über HTTP GET ausgeführt und daher wird der AEM Headless-Client für JavaScript verwendet, um die persistierten GraphQL-Abfragen gegen AEM auszuführen und den Adventure-Inhalt in die App zu laden.

Jede persistierte Abfrage verfügt über eine entsprechende Funktion in src/lib//aem-headless-client.js, die den AEM GraphQL-Endpunkt aufruft und die Adventure-Daten zurückgibt.

Jede Funktion ruft wiederum die aemHeadlessClient.runPersistedQuery(...) auf, um die persistierte GraphQL-Abfrage auszuführen.

// 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(queryVariables) { ... }

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

Seiten

Die Next.js-App verwendet zwei Seiten, um die Adventure-Daten darzustellen.

Bereitstellungskonfiguration

Next.js-Apps, insbesondere im Zusammenhang mit Server-seitigem Rendering (SSR) und Server-seitiger Generierung (SSG), erfordern keine erweiterten Sicherheitskonfigurationen wie Cross-Origin Resource Sharing (CORS).

Wenn jedoch Next.js im Client-Kontext HTTP-Anfragen an AEM sendet, sind möglicherweise Sicherheitskonfigurationen in AEM erforderlich. Überprüfen Sie das Tutorial zur Bereitstellung von AEM Headless-Einzelseiten-App für weitere Details.