How SitecoreAI Reimagines SaaS Customization Through Next.js Apps and the App Studio

A major theme of Sitecore Symposium this year was customizability. Customizability has always been what has set Sitecore apart in the industry. The ability to make our sites do anything is why clients use Sitecore instead of Wordpress. However, that customizability also became what held Sitecore back technologically; what made it customizable (running a CM server on-prem or PaaS) also made it resource-heavy, difficult to debug when developers made customizations that broke Sitecore’s functionality, and difficult to keep up to date with patches and upgrades. Turning Sitecore into a SaaS product came with many advantages and was a clear move for keeping up with the industry; it provides lower costs, easier scalability, and seamless updates and upgrades handled by Sitecore so that any SaaS solution is always up to date. However, the downside to SaaS was that it meant losing the customization that made Sitecore so special, because SaaS products could not be customized… until now.

Dave Tilbury, Sitecore’s COO, spoke on Wednesday about how Sitecore has redefined SaaS by providing a clear pathway for customization in SitecoreAI. This means that all of the customizations that were previously done for XM/XP clients - import tasks to create or modify Sitecore content from an external source, custom fields, third-party integrations, etc. - can be done in SitecoreAI, though the development process has changed. Rather than deploying dlls and configs to the CM server to override Sitecore’s behind-the-scenes processes, customization is done “on top” of SitecoreAI using fully external applications. Because these applications are completely independent of Sitecore, they cannot break features of Sitecore (or the whole site) when Sitecore deploys updates.

How do we create these applications?

These applications will be NextJS applications and can be hosted on Vercel. In your application, you will use the GraphQL API, Webhooks, and other Sitecore APIs. The GraphQL API is used for retrieving content or making content changes - this essentially replaces anything you would have done with the Sitecore Item API in .Net. Webhooks allow you to hook into Sitecore events to run code in response to items being saved, published, etc - allowing you to replicate what you would have previously done by patching a handler into the .Net item:saved, item:publish etc events. Other APIs include the Experience Edge Admin API, the Sites and Pages APIs, and the Agent API.

How does my application communicate with Sitecore?

That’s where the App Studio comes in. The Marketplace SDK allows communication between your application and your Sitecore instance and allows your application to run inside the Sitecore UI for an integrated user experience. It gives you an interface to access all of the Sitecore APIs and handles authentication and security. In order for the SDK to work, the application must be run through the Sitecore Cloud Portal. In the App Studio, you can create and manage all of your apps. Custom apps are only visible to your organization and any other organizations you grant access to. The process to create an app is simple; you only need to give it a name, select the extension points (standalone, full screen within a tenant, as a dashboard widget, inside the Page Builder context pane, or as a custom field), choose to grant your app access to the Sitecore APIs, set the deployment URL, and upload a logo. The deployment URL can be set to localhost during development and will be updated to your public URL once completed. Your app will need to be available at a publicly accessible URL; you will need to consider the domain name and DNS.

In the Cloud Portal, your app will open at your chosen extension point and run inside an iframe. Sitecore handles communication between itself and the application inside the iframe in order to initialize the Marketplace Client with your user permissions and Sitecore information. The information available to the client depends on the extension point; for example, in the fullscreen extension point you’ll get information about the current tenant and Sitecore context ID, whereas in the Page Builder context pane you will also get details about the selected item.

How do I use the SDK?

Getting started with the SDK is simple. If you haven’t created your application yet, you can create a new repo off of the Marketplace Starter Kit. This gives you all of the code you need to initialize the Marketplace client and retrieve your application data, as well as example pages for each extension point.

If you already started making your application without the Starter Kit, you can use the Quick Start Guide to add the SDK to your project. Once you install the npm packages and copy the code for the client hook, you only need to initialize the client in an effect hook on your application’s main page (all of this code is provided), and you can then start using the client in your code.

What about public apps?

When you create an app, you also have the choice to make it public. Public apps will be available to all SitecoreAI users and can be browsed and searched for in the Marketplace.

Unlike custom apps, public apps undergo a review process from Sitecore to ensure quality, security, and style consistency. Sitecore provides the Blok design system to make it easy to style your app in accordance with Sitecore’s style guidelines.

The Marketplace also gives you the ability to monetize your apps. It’s your choice if you want to make your app free, freemium, or paid.

This is the time to start learning and building your apps, especially if you want to be on the forefront of developing public apps for the Marketplace.

With apps being the path for SitecoreAI customization, it’s critical now to start learning how to use the Sitecore APIs and get familiar with the App Studio. Furthermore, creating public apps is a fantastic way to contribute to the Sitecore community, help yourself or your company stand out in the industry, and add to your contributions for Sitecore MVP. I’ve written several blog posts about transitioning from the .Net Sitecore Item API to GraphQL, including this query library that you can use to help you get started. Happy coding!