Sitecore Headless offers several ways to set up the environment, with four different modes available: Disconnected mode, connected mode, Integrated mode, and API mode.
This blog will focus on setting up the Sitecore Headless services with Next-Js in Disconnected mode. This mode is suitable for development purposes, where data is usually obtained from static YAML or JSON files.
For production or connected development, the route data is obtained by making requests to the Sitecore Layout Service. This service can be using either HTTP requests or in-process for Integrated mode SSR.
To configure the Disconnected mode, follow the steps below
Now Open PowerShell in Admin mode and execute the below command for installing Sitecore CLI,
npm install -g @sitecore-jss/sitecore-jss-cli
npm init sitecore-jss nextjs
Important Enter Sitecore hostname as mynextjs.dev.local in next connected mode blog. This host name we will create in connected mode blog.
You will see the below image for application is created successfully ab also display a some basic command for run the application.
Now you can check application in your directories your see some nextjs folder structure for applications.
Go to the application root folder structure and execute below command for starting your application.
Wait for some time to start the application. Go to localhost URLhttp://localhost:3000 to see the home page of our application.
Now we can see the application successfully running in disconnected mode.
By following the above given steps and process, you will be able to setup the headless NextJS app even in the disconnected mode in Sitecore. In the next blog, we will explore how to setup the same for Connected Mode.