Architecture and APIs for integrating JSS Next.js apps with Sitecore editors

Current version: 22.x

Prior to the release of JSS 22.1, there was one method of integrating your JSS Next.js apps with Sitecore editors, involving the use of chromes. The 22.1 release added another method of editor integration involving metadata:

  • Metadata - the Next.js app is rendered inside an iframe within XM Cloud Pages. It offers several advantages over the chromes method, including faster load times, simplified architecture and configuration, and avoiding the need to tunnel to localhost or manage the editing data cache. This method is supported by XM Cloud Pages only.

  • Chromes - the data is sent using a POST request to the Next.js /api/editing/render endpoint, and the resulting page markup is sent back to the editor. This method is supported by both Sitecore Experience Editor and XM Cloud Pages.

Important

If you're using JSS 22.1 or later and XM Cloud Pages, we recommend you choose the metadata method. If you don't need to integrate with Sitecore Experience Editor, you can also make some configuration changes to further optimize your editor integration.

Do you have some feedback for us?

If you have suggestions for improving this article,