Sitecore Helix Overview

Sitecore Helix is a collection of design principles and best practices for the solution architecture of Sitecore implementations. At a high level, it is a modular architecture.

The core concepts are:

1. Modules – group code by business functionality not technical functionality.
2. Layers – separate your modules into Foundation, Feature, and Project layers.
3. Dependencies – Foundation layer is at the bottom of the dependency chain, followed by Feature, and finally Project layer.

Image credit: Sitecore (opens in a new tab)

You can learn more about Sitecore Helix here (opens in a new tab).

Sitecore Helix in a Next.js (and other JavaScript) site

Most developers working with Sitecore are familiar with the Helix principles. However, moving to a Next.js site some have wondered: do we still follow the Helix guidelines? How?

Some have recommended to put everything on the project layer. I believe there is still some value to the Helix principles. In this section of the guide, we will explore an approach to Sitecore Helix in a Next.js (and other JavaScript) site.

Modules

When we create components, we should colocate code related to each other. As your code base grows, it is alot easier to maintain and it is alot quicker to find code related to your component.

Layers

Code should further be separated into layers.

1. Feature – This layer contains components closely related to the business domain.
2. Foundation – Code that is used by multiple features are on this layer.
3. Project – Known as the composition layer, it is on this layer that all features are stitched together.

Dependencies

In Sitecore Helix, dependencies should flow downwards. This means that features should not rely on other features. Taking the example from above, the Navigation feature should not have a reference to the Account feature and vice versa.

If multiple features or components rely on a piece of code, it most likely should be abstracted out and place on the Foundation layer. Taking the example from above again, both the Login and the Account component relies on Authentication so that code is placed on the Foundation layer.

This also means that Foundation layer code should be the most stable and the least likely to change. When changing code on the Foundation layer, one must be careful as the code can affect multiple features.

Image credit: Sitecore (opens in a new tab)