Introduction

Welcome to a beginner's guide to developing with Sitecore Next.js. This guide is designed to be a starting point for developers who are new to building Sitecore solutions in a headless, Next.js environment.

Transitioning from a monolithic architecture to a composable one can seem overwhelming, which is why this guide breaks the process down into easy-to-understand pieces. It provides step-by-step instructions on setting up a local environment and creating components. This guide would not go into depth on every topic; it is intended for the audience to conduct further research on their own.

You will learn:

1. Brief overview of headless architecture
2. How to setup a local docker instance running Sitecore XM
3. Create basic components using Next.js
4. GraphQL
   1. An introduction to GraphQL
   2. Understanding the distinction between Integrated and Connected modes
   3. Learning how to construct queries using the xGraph Browser
   4. Building a component that utilizes GraphQL to retrieve multiple Sitecore items in both Integrated and Connected modes

If you're a traditional Sitecore MVC developer or a front-end developer starting on a headless Sitecore Next.js solution, then this guide is perfect for you.

Getting started

If you do not have an Sitecore environment, start at prerequisites.
If you already have one, feel free to skip to create your first component.