Skip to main content

Technology Partners

Creating a containerized Sitecore Headless StarterKit with the latest Next.js SDK and Headless SXA

Sitecore Headless Starterkit

Many of you who want to start a headless solution come into a situation where there is a lot of information available and it is difficult to identify which approach to take. Sitecore features decent documentation, but it covers only part of a desired solution and is segmented. This post will address the problem and take you through a beautiful starterkit of yours, which you can proudly put as an initial commit into your git repository.

Recently Sitecore has updated their Headless SDK to version 21.1.5 featuring its helpful wizard, that allows you to scaffold your project code for many of the options:

  • nextjs
  • angular
  • node-headless-ssr-experience-edge
  • node-headless-ssr-proxy
  • react
  • react-native
  • vue

We’re interested in Next.js option which carries out the maximum potential for us now. And it comes with plenty of handful examples to include, such as:

  • components and setup for working disconnected
  • a tracking component for Headless XP with CD and xDB
  • components and setup for Headless SXA projects
  • setup for projects using XM Cloud Embedded Personalization
  • setup for hosting multiple sites in a single NextJS application

One can utilize it pretty ease with npx command, as is described at the official documentation:

npx create-sitecore-jss starterkit

npx scaffolding command for next.js sdk

Isn’t this awesome?

The issue here is that this scaffolding does not provide Sitecore containers tied to the headless app running at a rendering host container. Let’s create one using Sitecore.DevEx.Templates, for the actual commands please refer to the  documentation:

dotnet new -i Sitecore.DevEx.Templates --nuget-source
dotnet new sitecore.nextjs.gettingstarted -n StarterKit

Once complete, you’ll get a containerized starterkit, but it won’t have either SXA, or even SPE.

There are no ready-to-use Sitecore images for 10.3 with SXA and Next.js headless SDK, so we’ll have to build one.  To start with, we’ll need to pick and reference two images – one for SPE and another for SXA as environmental variables. Once done, update docker-compose.override.yaml file to pass these as ARGS into CM and CD Dockerfiles, as well as initialize containers for SQL Server and Solr. Upon completion, provide build instructions for copying assets, and that’s it.

Once the repository is initialized and run, it will spin up containers with Sitecore 10.3 and operable SXA in it. There will be also a default JSS app you can later move into a headless SXA tenant. Here’s a recording I’ve done for the whole process:

Your starterkit is ready, you may start adding features to it. For example, a final step may be integrating the desired features (like single app multisite support), scaffolding at the first step, into our new containerized environment.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Martin Miles

Martin is a Sitecore Expert and .NET technical solution architect involved in producing enterprise web and mobile applications, with 20 years of overall commercial development experience. Since 2010 working exclusively with Sitecore as a digital platform. With excellent knowledge of XP, XC, and SaaS / Cloud offerings from Sitecore, he participated in more than 20 successful implementations, producing user-friendly and maintainable systems for clients. Martin is a prolific member of the Sitecore community. He is the author and creator of the Sitecore Link project and one of the best tools for automating Sitecore development and maintenance - Sifon. He is also the founder of the Sitecore Discussion Club and, co-organizer of the Los Angeles Sitecore user group, creator of the Sitecore Telegram channel that has brought the best insight from the Sitecore world since late 2017.

More from this Author

Follow Us