Xperience by Kentico Headless channel & Next.js: Exploration (Part 1)

In this article, I begin exploring the possibilities of the Headless channel in Xperience by Kentico and its potential for sourcing data for the Next.js framework. You’ll learn about headless CMS in general, how it applies to Xperience by Kentico, and the plans for integrating it with Next.js.

For the past couple of years, I have been a contributor to a project utilizing Kontent.ai and Next.js. Kontent.ai is a headless-first CMS that, in my opinion, is an exceptional product ⭐. With this experience, I decided to explore the possibilities of the Headless channel in Xperience by Kentico, as it is an aspect that I, along with the wider Kentico community, tend to overlook.

In this article, I aim to share my perspective as a web developer on why this is the case, provide a general overview of headless architecture 🏗️, explain what it means in the context of Xperience by Kentico, discuss why you might need it, and offer a brief introduction to the Next.js framework. In the next part of this series, I will delve deeper into this topic through a hands-on integration 🔧.

By the way, Kontent.ai has its roots in Kentico 🌱.

What is a headless CMS in general?

You can find many definitions on the internet 🌐; however, for this article, I’d like to simplify it to reflect my perspective as a web developer.

The core of a headless CMS lies in its decoupled architecture, with two key aspects:

1. A system (often with an Administration UI) that allows editors to model, create, and manage content flexibly 🛠️.
2. An API that serves structured content through platform-agnostic protocols, enabling consumption across diverse applications and devices 📱💻.

Each product labeled "headless" comes in various flavors 🍦 to stand out in the market and meet specific customer needs. Let’s explore what "headless" means in the context of Xperience by Kentico.

Headless in Xperience by Kentico

Xperience by Kentico positions itself as a hybrid-headless CMS. This means its headless feature set is more limited compared to headless-first CMSs, as the product’s overall focus is divided. At the core of the system is the "Content Hub," which enables editors to model, create, and manage content flexibly. This highlights the first key aspect of a headless CMS.

Content in Xperience by Kentico can be delivered through three primary channel types:

1. Website Channel 🌍: Offers a flexible UI and an integrated, extensible .NET API for building and managing websites.
2. Email Channel 📧: Provides a user-friendly interface for managing email campaigns and sending emails.
3. Headless Channel 🔗: Utilizes a GraphQL API to enable content consumption across a wide range of applications and devices.

The Headless channel demonstrates the second key aspect of a headless CMS: content delivery across multiple platforms 🌐📲.

Currently, the most advanced channel is the Website channel, likely the primary reason customers choose Xperience by Kentico. However, the Email and Headless channels complement the overall feature set, offering companies the tools they need to excel in digital marketing 📈.

Why I Think the Headless Channel is Overlooked

From the start, Kentico products were built around the .NET framework and platform, mainly for website development. As a result, the customer base and community have been focused on Microsoft technologies.

Now, as users transition from legacy Kentico products to Xperience by Kentico, the shift is not just about the product but also about the mindset. Xperience by Kentico offers the Headless Channel by default, allowing for multi-platform solutions. However, many users are still focused on website-only .NET solutions, making the Headless Channel somewhat overlooked as they adjust to this new, more flexible approach.

Why Might You Need a Headless Channel?

As mentioned, Xperience by Kentico is a website-centric CMS, supported by the robust Website channel for business-critical websites. The Email channel enhances email marketing efforts. The Headless channel, on the other hand, serves as a versatile solution when you need to deliver content anywhere, across diverse platforms, for various purposes.

Here are some scenarios I’ve encountered in my career where the headless content delivery proved useful:

• Interactive Campaign Sites or Landing Pages 🌟: For highly interactive projects, other technologies may be better suited than .NET, which is required for the Website channel.
• Developer Availability 👩‍💻👨‍💻: When there’s a shortage of .NET developers, you can utilize a JavaScript developer, for instance, to build a campaign site or landing page.
• Mobile, Web, or Hybrid Apps 📱💻: When a specific technology stack is required, Xperience by Kentico can act as a flexible puzzle piece 🧩 rather than a one-size-fits-all solution.
• Integration with External Systems 🔗: When you need to deliver content to external systems, such as CRMs or e-commerce platforms.

For this series, I’ll focus on a scenario where we build a simple campaign site to demonstrate the process. Given my strong experience with the Next.js framework, I’ll use it for this example 🚀. Since the Kentico audience is generally more .NET-oriented, I think it would be beneficial to briefly introduce what Next.js is.

What is Next.js?

Next.js is a powerful, open-source React framework ⚛️ that allows developers to build fast and scalable web applications. It offers a range of features that simplify development, including server-side rendering (SSR), static site generation (SSG), and API routes. Next.js is supported by the Vercel ecosystem, which provides hosting services and a variety of features that significantly enhance the developer experience. In this series, we will use just a fraction of Next.js’s capabilities to keep things simple and easy to understand, hopefully sparking your curiosity to explore it in more depth 🔍.

Next Steps

With a clear understanding of Xperience by Kentico’s headless capabilities and our goal of building a simple campaign site using Next.js, we’ll move on to the next part of the series. In the upcoming article, we’ll get into the technical details ⚙️ and learn how to configure a Headless channel, content type and content item to deliver our first piece of content via the Headless channel’s GraphQL API.