Setting Up Sitecore Headless with Next.js in Disconnected Mode

Sitecore Headless CMS offers a flexible way to integrate with different frontend technologies. For developers working with frameworks like Next.js, Sitecore provides various ways to set up the environment, including four distinct modes: Disconnected Mode, Connected Mode, Integrated Mode, and API Mode. Each mode offers unique features for different stages of development and production needs.

What Is Disconnected Mode?

Disconnected Mode is designed for local development and testing without requiring a direct connection to the Sitecore platform. In this mode, data is typically retrieved from static files (like YAML or JSON), and content updates are done manually. This mode is ideal for frontend developers who want to focus on building the user interface and the site’s functionality without waiting for backend integration. In Disconnected Mode, the data flow is not dependent on the Sitecore CMS. Instead, content is stored locally in static files, which are easier to manage and quicker to access during development.

Set Up Sitecore Headless with Next.js in Disconnected Mode

Disconnected mode is typically used during the development phase, where content is often fetched from static files instead of a live backend. This setup can significantly speed up development by allowing for quick iteration without needing an active connection to a Sitecore instance.

In production or connected development, we need to integrate with the Sitecore CMS to dynamically retrieve content rather than relying on static data files. This is where the Sitecore Layout Service comes into play. The Layout Service is responsible for rendering Sitecore data and sending the required content to your frontend applications.

We need to follow below mentioned steps to configure the Disconnected mode for our development

Pre-Requisites

Node JS – The latest version of Node JS installed, if it is not then please installed from Download Node JS.

Sitecore - Running instance of latest Sitecore XP/XM with Sitecore Headless packages installed in it. If it is not then please install

Download and install Sitecore Experience Platform from https://developers.sitecore.com/downloads/Sitecore_Experience_Platform

Download Sitecore Headless Rendering package and install it in Sitecore instance from

https://developers.sitecore.com/downloads/Sitecore_Headless_Rendering

PowerShell – To execute commands

Steps to setup the application

1.       Install Sitecore JSS CLI

Open the Windows PowerShell in Admin mode

Run the following Command npm install -g @sitecore-jss/sitecore-jss-cli

A blue screen with white text AI-generated content may be incorrect.

Optionally, to verify the installation and see the list of commands available, run the following Command jss –help

Keep the same Powershell window open to execute the next commands

2.       Create next js application

Move to the directory when the project to be created, for my case it is

C://Learning/NextJS

Execute below command, it will create new application under the mentioned location

npm init sitecore-jss nextjs

A blue screen with yellow and green text AI-generated content may be incorrect.

Please follow the image/below instructions for the configuration:

Where would you like your new app created? C:\Learning\NextJS

Would you like to use the pre-push hook for linting check? Yes

What is the name of your app? sitecore-jss-app

What is your Sitecore hostname (used if deployed to Sitecore)? sitecore103sc.dev.local

How would you like to fetch Layout and Dictionary data? REST

How would you like to prerender your application? SSR

Are you building for Sitecore XM Cloud? No

Would you like to include any add-on initializers? nextjs-styleguide - Includes example components and setup for working disconnected

For this step, please be careful to select nextjs-styleguide - Includes example components and setup for working disconnected

It gives us 4 options to select anyone, the first one is highlighted by default but still not considered as selected. Using just arrow key and enter key will miss the selection.

we need to press <<space>> to select the option. It will show an asterisk (*) inside the braces in starting then only it is considered as selected, as shown below.

Press Enter now to continue with the setup..

Once the process is done, we will see below.

A blue rectangle with white text AI-generated content may be incorrect.

Please check in the directory, the new application is available there with below folder structure.

Run the application in disconnected mode

In the PowerShell, go to the application root folder “C:\Learning\NextJS\nextjs” and execute below command for starting the application in disconnected mode.

jss start

It will take bit time to build and start the application, meanwhile it shows this.

A blue screen with white text AI-generated content may be incorrect.

Browse the mentioned URL http://localhost:3000 and we can see the home page of our application. 

A screenshot of a computer AI-generated content may be incorrect.

 

Here is the application is running in disconnected mode. It shows some instructions and commands to start with.

Please note that the application starts from the correct directory only, if we run start command in other directory then it gives us below error

A blue screen with white text AI-generated content may be incorrect.

If we switch to correct directory, it starts working.

A blue screen with white text AI-generated content may be incorrect.

Here we can work in disconnected mode for the development without depending on the backend.

We will see connected mode setup in out next blog.

Thank you!


Comments

Post a Comment

Popular posts from this blog

Translating Sitecore items’ field values into different language with PowerShell and Translate API

Image
Recently, we encountered a situation where we needed to translate multiple Sitecore field values across numerous items into different languages. Manually handling each item and field was both time-consuming and complex—especially since actual translation was required, not just copying values between language versions. We explored various approaches to streamline the process. While AI-based solutions seemed promising, but client side Compliances for AI usage ruled out that option. Another practical alternative was to use spreadsheets like Excel or CSV files containing translated content and then import those values into Sitecore using PowerShell scripts. During our exploration, we discovered a freely accessible translation API that doesn't require an API key. By leveraging this in our PowerShell script, we were able to automate the translation process and directly apply the translated content to the appropriate language versions of the Sitecore items—saving both time and effort. ...
Read more

Create Sitecore Ribbon Button using Sitecore PowerShell Extensions

Image
Creating a custom Ribbon button in Sitecore using Sitecore PowerShell Extensions (SPE) involves several steps, which I'll guide you through below. The general process includes Create PowerShell Script Module and Add Integration Point Setup the PowerShell script Library and Add PowerShell script Configuring the Ribbon button and Sync Verify the button in the Ribbon Here's how we can achieve that: Pre-Requisites: Running Sitecore Instance PowerShell ISE to run PowerShell script (Install compatible Sitecore.PowerShell.Extensions if it’s not there) Step-1: Create PowerShell Script Module and Add Integration Point Create PowerShell Script Module: Go to Content Editor . In the content tree, navigate to: System > Modules > PowerShell > Script Library . Right-click on Script Library and select Insert > PowerShell Script Module . Give it a name, su...
Read more