Use SPA editor for Experience fragments for remote SPA(Next js or React) Application

Question

Hi, we want to implement header and footer for AEM Headless with remote SPA(Next Js). Will that be possible by using experience fragments? Will I get SPA editor for editing the experience fragments components? Please suggest some pointers? Thanks in Advance.

avesh_narang · Accepted Answer

Experience fragment should be created as is only , but make sure remote SPA editor should be configurated with AEM instance appropiately.

Reference : https://experienceleague.adobe.com/en/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/remote-spa/spa-bootstrap

EstebanBustamante · Answer

Hi,

Yes, you can edit XF via SPA editor; you just need to follow the same principles to make any component editable in the SPA editor. Map the component, use a sling model, and register it in the SPA code. Keep in mind that for the header and footer, you should have two components mapped into the SPA: the XF and also the header/footer.

You can check this example of how components are mapped in NextJS:

https://github.com/adobe/aem-headless-app-templates/blob/main/nextjs-remotespa/components/import-components.js

Hope this helps.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded