AEM avec NextJs RemoteSPA : un guide d’intégration complet

Bienvenue dans notre guide complet, dans lequel nous éclairons le processus de mise à jour d’une application à page unique (SPA) distante – fonctionnant indépendamment d’AEM – pour consommer et diffuser en toute transparence du contenu créé dans Adobe Experience Manager (AEM). Tout au long de ce blog, nous nous concentrons sur la configuration locale d’une instance AEM et d’une application Next.js, ainsi que sur la liaison nécessaire pour les faire fonctionner ensemble harmonieusement. Nous créerons également un composant de démonstration et le déposerons sur la page d’accueil, vous exposant ainsi à travailler sur Remote SPA avec AEM.

Étapes pour configurer une instance AEM locale avec l’application Nextjs

Étape 1 : configurer une instance AEM locale

1. Téléchargez le dernier SDK AEM
2. Décompressez le SDK AEM dans ~/aem-sdk
3. Renommez le fichier Jar de démarrage rapide du SDK AEM en « aem-author-p4502.jar ».
4. Dans Terminal, exécutez la commande suivante

java -jar aem-author-p4502.jar

En utilisant la commande ci-dessus, l’instance AEM est créée en mode Auteur et se lance automatiquement sur http://localhost:4502. Connectez-vous ensuite en utilisant les identifiants suivants :

Nom d’utilisateur : administrateur
Mot de passe : administrateur

Étape 2 : Téléchargez et installez le package du site Wknd

1. Téléchargez la dernière version de aem-guides-wknd.all.xxxzip
2. Aller à http://localhost:4502/crx/packmgr.
3. Téléchargez le aem-guides-wknd.all.xxxzip téléchargé à l’étape 1
4. Appuyez sur le bouton Installer pour l’entrée aem-guides-wknd.all-xxxzip. (Cette étape est utilisée uniquement à des fins de contenu.)

Étape 3 : Créer un projet AEM à l’aide de l’archétype AEM

Ici, nous utilisons AEM Archetype version 41 et supprimons le module frontend car nous n’avons plus besoin du module frontend car nous utilisons RemoteSPA.

Nous pouvons modifier groupId, appId et le titre de l’application selon les besoins.

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate \

 -D archetypeGroupId=com.adobe.aem \
 -D archetypeArtifactId=aem-project-archetype \
 -D archetypeVersion=41\
 -D aemVersion=cloud \
 -D appTitle="WKND App" \
 -D appId="wknd-app" \
 -D groupId="com.adobe.aem.guides.wkndapp" \
 -D frontendModule="decoupled"

Étape 4 : Modifications dans la base de code

Quelques ajustements sont requis pour la compatibilité d’AEM SPA Editor avec les SPA Remote Next.js.

Définir la page AEM comme modèle SPA distant Next.js : ouvrir ui.content/src/main/content/jcr_root/content/wknd-app/us/en/home/.content.xml et mettez-le à jour comme ci-dessous.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Page">
<jcr:content
cq:template="/conf/wknd-app/settings/wcm/templates/spa-next-remote-page"
jcr:primaryType="cq:PageContent"
jcr:title="WKND App Home Page"
sling:resourceType="wknd-app/components/remotepagenext">
<root
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<responsivegrid
jcr:primaryType="nt:unstructured"
sling:resourceType="wcm/foundation/components/responsivegrid">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="wknd-app/components/text"
text="&lt;p>Hello World!&lt;/p>"
textIsRich="true">
<cq:responsive jcr:primaryType="nt:unstructured"/>
</text>
</responsivegrid>
</root>
</jcr:content>
</jcr:root>

Enfin, déployez le projet AEM sur le SDK AEM à l’aide de la commande maven ci-dessous.

mvn clean install -PautoInstallSinglePackage

Étape 5 : Configurer la page AEM racine

1. Connectez-vous à l’auteur AEM
2. Accédez à Sites > Application WKND > nous > fr
3. Sélectionnez la page d’accueil de l’application WKND et appuyez sur Propriétés.
4. Accédez à l’onglet SPA
5. Remplissez la configuration du SPA distant : http://localhost:3000
6. Appuyez sur Enregistrer et fermer

Étape 6 : Cloner l’application Next.js

Clonez le projet sur votre ordinateur local à l’aide de la commande ci-dessous.

git clone https://github.com/adobe/aem-headless-app-templates

mkdir aem-nextjs-app
cp -r aem-headless-app-templates/nextjs-remotespa/* aem-nextjs-app/
cd aem-nextjs-app/

Étape 7 : Configurer l’application Next.js

1. Installer la version du nœud 16.x
2. Aller à l’endroit où aem-nextjs-app est présent
3. Exécuter la commande – installation npm

Créez 2 fichiers sous le répertoire aem-nextjs-app/ nommé en tant que « .env.développement» et « .env.production» et mettez-le à jour comme ci-dessous.

NEXT_PUBLIC_URL=http://localhost:3000

NEXT_PUBLIC_AEM_HOST=http://localhost:4502

NEXT_GRAPHQL_ENDPOINT=/content/graphql/global/endpoint.json

NEXT_PUBLIC_AEM_SITE=wknd-app

NEXT_PUBLIC_AEM_PATH=/content/wknd-app/us/en/home

NEXT_PUBLIC_AEM_ROOT=/content/wknd-app/us/en

Exécutez ensuite la commande build

npm run build

Ensuite, vous pouvez démarrer l’application en mode développement ou en mode production en utilisant la commande ci-dessous.

npm run dev

Ou

npm run start 

Étape 8 : Votre instance est désormais prête pour le développement

Vous pouvez créer un nouveau composant dans AEM et React et le restituer sur Page.

Étapes pour créer le composant dans l’application Next.js et le lier au composant AEM

Étape 1 : Créer un composant AEM

Créez DemoComponent dans ui.apps comme indiqué ci-dessous. Il n’est pas nécessaire d’avoir un fichier DemoComponent.html.

Créez un modèle DemoComponent dans le module principal comme indiqué ci-dessous.

Mettre à jour le fichier avec le contenu indiqué dans DemoComponentModel.java et DemoComponentModelImpl.java.

Ici, Sling Exporter est utilisé pour eExportation de modèles Sling en tant qu’objets JSON destinés à être consommés par des consommateurs Web programmatiques tels que d’autres services Web et applications JavaScript.

Étape 2 : Créer un composant dans l’application NextJs

Créez un fichier sous le répertoire – aem-nextjs-app/components/ nommé AEMDemoComponent.jsx (Télécharger AEMDemoComponent.jsx déposer).

Et mettez à jour le fichier comme ci-dessous –

Étape 3 : Créer un mappage avec le composant AEM

Ouvrez le fichier import-components.js et mettez-le à jour comme ci-dessous.

MapTo(`${NEXT_PUBLIC_AEM_SITE}/components/democomponent`)(AEMDemoComponent)

Étape 4 : déposez le composant de démonstration sur la page d’accueil

1. Aller à http://localhost:4502/editor.html/content/wknd-app/us/en/home.html

2. Déposez le composant ici

3. Maintenant, ouvrez la page d’accueil en mode publié – http://localhost:4502/content/wknd-app/us/en/home.html puis inspectez la page et vérifiez les appels réseau

4. Vérifiez maintenant le composant sur l’application NextJs : http://localhost:3000/

5. Inspectez la page, ouvrez l’onglet réseau, vérifiez l’appel _app.js, puis recherchez le composant démo.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE