Cómo usar
-
Clonar el repositorio
adobe/aem-guides-wknd-graphql
: -
AEM Edite el archivo
aem-guides-wknd-graphql/next-js/.env.local
y establezcaNEXT_PUBLIC_AEM_HOST
en el servicio de.# AEM service NEXT_PUBLIC_AEM_HOST=https://publish-p123-e456.adobeaemcloud.com/ ...
AEM AEM Si se conecta a servicio de Author, la autenticación debe proporcionarse ya que el servicio de Author es seguro de forma predeterminada.
AEM Para usar un conjunto de cuentas de usuario local
AEM_AUTH_METHOD=basic
y proporcionar el nombre de usuario y la contraseña en las propiedadesAEM_AUTH_USER
yAEM_AUTH_PASSWORD
.... # 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 un token de desarrollo local de AEM as a Cloud Service, establezca
AEM_AUTH_METHOD=dev-token
y proporcione el valor completo del token de desarrollo en la propiedadAEM_AUTH_DEV_TOKEN
.... # 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
-
AEM Edite el archivo
aem-guides-wknd-graphql/next-js/.env.local
y valide queNEXT_PUBLIC_AEM_GRAPHQL_ENDPOINT
se ha establecido en el extremo de GraphQL de la cuenta de usuario correspondiente.Cuando use WKND compartido o Sitio WKND, use el extremo de la API de GraphQL
wknd-shared
.... NEXT_PUBLIC_AEM_GRAPHQL_ENDPOINT=wknd-shared ...
-
Abra un símbolo del sistema e inicie la aplicación Next.js con los siguientes comandos:
-
Una nueva ventana del explorador abre la aplicación Next.js en http://localhost:3000
-
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
AEM A continuación se muestra un resumen de cómo se crea la aplicación Next.js, cómo se conecta a la aplicación sin encabezado para recuperar contenido mediante consultas persistentes de GraphQL y cómo se presentan esos datos. El código completo se encuentra en GitHub.
Consultas persistentes
AEM AEM Siguiendo las prácticas recomendadas de sin encabezado de la aplicación, Next.js utiliza consultas persistentes de GraphQL de la aplicación para consultar los datos de aventura de la aplicación de la manera más rápida y sencilla. La aplicación utiliza dos consultas persistentes:
- AEM
wknd/adventures-all
persistió en la consulta, lo que devuelve todas las aventuras en la que se ha realizado un seguimiento con un conjunto abreviado de propiedades. Esta consulta persistente genera la lista de aventuras de la vista inicial.
wknd/adventure-by-slug
persistió en la consulta, lo que devuelve una sola aventura deslug
(una propiedad personalizada que identifica de forma exclusiva una aventura) con un conjunto completo de propiedades. Esta consulta persistente activa las vistas de detalles de aventura.
Ejecutar consulta persistente de GraphQL
AEM consultas persistentes se ejecutan a través de la GET AEM HTTP y, por lo tanto, Cliente sin encabezado para JavaScript se usa para ejecutar las consultas persistentes de GraphQL AEM en contra de las consultas y cargar el contenido de aventura en la aplicación.
AEM Cada consulta persistente tiene una función correspondiente en src/lib//aem-headless-client.js
, que llama al punto final de GraphQL de la y devuelve los datos de la aventura.
A su vez, cada función invoca aemHeadlessClient.runPersistedQuery(...)
y ejecuta la consulta de GraphQL persistente.
Páginas
La aplicación Next.js utiliza dos páginas para presentar los datos de la aventura.
-
src/pages/index.js
Usa 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 Next.js. -
src/pages/adventures/[...slug].js
Una ruta dinámica Next.js que muestra los detalles de una sola aventura. Esta ruta dinámica recupera previamente los datos de cada aventura usando Next.js's getStaticProps() mediante una llamada a
getAdventureBySlug(slug, queryVariables)
usando el parámetroslug
pasado a través de la selección de aventuras en la páginaadventures/index.js
, yqueryVariables
para controlar el formato, la anchura y la calidad de la imagen.La ruta dinámica puede recuperar previamente los detalles de todas las aventuras mediante GetStaticPaths() de Next.js y rellenando todas las permutaciones de ruta posibles en función de la lista completa de aventuras devuelta por la consulta de GraphQL
getAdventurePaths()
El uso de
getStaticPaths()
ygetStaticProps(..)
permitió la generación estática del sitio de estas páginas de Next.js.
Configuración de implementación
Las aplicaciones 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).
AEM AEM Sin embargo, si Next.js realiza solicitudes HTTP a las que se debe acceder desde el contexto del cliente, es posible que se requieran las configuraciones de seguridad en las que se realiza la petición de acceso desde el. AEM Revise el tutorial de implementación de aplicación de una sola página sin encabezado para obtener más detalles.