Sitecore JSS with Next.JS project creation in disconnected development workflow, Session-1

Author: Prem Murmu

Sitecore JSS Disconnected Mode Development Workflow

Working with Sitecore JSS in Disconnected Mode allows developers to build front-end applications independently without requiring a Sitecore instance. This approach is useful during the early stages of development, where front-end teams can design UI components, structure data, and define routing without depending on a fully configured backend.

Why Use Disconnected Mode?

  1. Faster Development – Developers can start working without waiting for Sitecore to be set up.

  2. Independent Front-End Development – UI components can be created using mock data.

  3. File-Based Routing – Simplifies routing without requiring backend configurations.

  4. Easy Transition to Connected Mode – Once the backend is ready, integration with Sitecore is seamless.

Steps to Set Up Sitecore JSS in Disconnected Mode1. Prerequisites

Before starting, ensure that the following tools are installed:

  • Node.js (latest version)

  • Sitecore JSS CLI (Install using npm install -g @sitecore-jss/sitecore-jss-cli)

2. Creating a JSS Project

Run the following commands in your terminal:

bashCopyEditmkdir myjssapp && cd myjssapp jss create myjssapp nextjs

This will create a new Next.js project for Sitecore JSS.

3. Running in Disconnected Mode

Start the project in Disconnected Mode using:

bashCopyEditcd myjssapp jss start:disconnected

This mode allows development without connecting to a Sitecore instance.

4. Understanding Project Structure

A typical JSS Next.js project includes the following:

  • /data – Stores mock JSON data.

  • /src/components – Contains reusable UI components.

  • /src/pages – Manages routing.

  • /sitecore/config – Configuration settings.

5. Defining Mock Data

Modify the route.json file inside /data:

jsonCopyEdit{ "name": "home", "displayName": "Home Page", "layout": { "placeholders": { "jss-main": [ { "componentName": "HeroBanner", "fields": { "title": "Welcome to JSS!", "subtitle": "This is running in disconnected mode." } } ] } } } 6. Creating a React Component

Inside /src/components/HeroBanner.tsx, create:

tsxCopyEditimport React from 'react'; import { Text } from '@sitecore-jss/sitecore-jss-nextjs'; const HeroBanner = ({ fields }) => { return ( ); }; export default HeroBanner; 7. Testing the Application

Restart the application and open http://localhost:3000 in the browser:

bashCopyEditjss start:disconnected Transitioning to Connected Mode

Once the backend is ready, connect the project using:

bashCopyEditjss deploy app --includeContent jss start Conclusion

Working with Sitecore JSS in Disconnected Mode enables developers to start building applications without waiting for the backend, increasing productivity and allowing parallel front-end development. This ensures a smoother transition when integrating real data in Connected Mode.