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

[manikanta290719]

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.

[EstebanBustamante]

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-com...

Hope this helps.

[manikanta290719]

Is there any reference on how to create experience fragment template that supports remote SPA. Any pointers would be helpful.

[avesh_narang]

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-headles...