A new journey: Sitecore headless development in Next.js - an introduction

Welcome to my newest blog series! If you’ve been following my previous blog series on Sitecore Managed Cloud, you’ll notice that this blog is different from what you’re used to. Instead of technical details and in-depth code discussions, I now want to take you on a personal journey: my journey to “the other side" of headless development. Including my struggles to adapt and leverage my quality standards in Sitecore Headless Services with Next.js.

We've come a long way

I started my programming journey in machine language, then moved on to Pascal, C and C++, followed by DBbase4 before switching to Clipper. I programmed in Delphi for a long time before finally switching to C#. Over the years I’ve worked on many exciting projects using C#, but one technology that particularly appeals to me is Sitecore. I’ve been privileged to witness Sitecore's growth and have completed numerous projects using the platform. And I’m proud to say that I’ve been a Sitecore MVP for 10 years.

I vividly remember the days when Sitecore used ASP.NET web forms and XSLT to build websites. When Sitecore introduced the ability to use MVC, it was a big move that many had to adapt to. At that time, there were no established standards for building Sitecore websites. Sitecore took the approach of providing the tools and letting partners build their websites. Later, however, Sitecore introduced Helix, which became the standard for setting up a Sitecore environment and is now the basis for many Sitecore projects.

Then came the introduction of JavaScript frameworks such as React, Angular, and Vue. Many front-end developers began using these frameworks with Sitecore, but this was not always successful. Sitecore responded by introducing JSS, which they later renamed Sitecore Headless Services. This allowed developers to build true React applications independent of Sitecore, while still using Sitecore to manage content.

Introducing Sitecore XM Cloud with Next.js

Recently, Sitecore launched XM Cloud, which is its SaaS solution for all of its other SaaS products. For XM Cloud, Sitecore partnered with Vercel (Next.js).

During the SUGCON 2023 in Malaga, I had some questions about building Next.js applications in combination with Sitecore XP1 and Sitecore XM Cloud. I am currently in the middle of migrating a Sitecore MVC website to headless Next.js and building a new customer portal for our client.

I had previously built a business portal using Microsoft Blazor and Sitecore and was impressed with Blazor. However, I had taken on the challenge of building this website and new portal in Next.js.

As a developer with experience in various projects, I have strong opinions about front-end development. I am a proponent of creating maintainable code and have given guest lectures on this topic at various schools. In my opinion, "the standard" by Hassan Habib good be an excellent starting point.

What path are you on?

During SUGCON, it became clear to me that there are still two groups of developers: the back-end developers and the front-end developers working with HTML/CSS/JavaScript. The latter group has mostly moved on to Next.js, React, Angular, etc, and other similar technologies, but they may have no knowledge of Sitecore, which can cause friction between the two groups. There is also a small group that can handle both: they are often referred to as "full-stack developers.", but I don’t think that term is very convenient.

So the question is, as a Sitecore developer, are you ready to make the switch to “the other side”? Sitecore has two paths for developers: you can continue on the old path and use the .NET Core rendering host, or you can create your headless application using Next.js. At uxbee, we have chosen the latter path.

In conclusion

Making the switch to “the other side” requires careful consideration of your skills, knowledge, and interests. Whether you choose the .NET Core rendering host or the headless path, always aim for maintainable code that can be easily adapted to future needs.

Stay tuned for the upcoming blog posts in this series, where I will delve deeper into specific topics, share practical tips and explore the nuances of Next.js development. I hope this series will be informative, insightful and perhaps even inspiring for fellow developers who are also navigating their own journeys in the ever-evolving world of web development. Let's embark on this new adventure together!