Creating a Sitecore JSS + Next.js Project (Sitecore 10.4) - Complete CLI Commands

Here's theexact step-by-step command sequence to scaffold a production-ready Next.js JSS app with GraphQL and SSG for Sitecore 10.4:

Prerequisites

# Install JSS CLI globally (required for Sitecore 10.4)npm install -g @sitecore-jss/sitecore-jss-cli

Create the Next.js JSS Application

# Modern approach (JSS 20+) - Recommended for Sitecore 10.4npx create-sitecore-jss my-nextjs-app --templates nextjs# Alternative using npm initnpm init sitecore-jss my-nextjs-app nextjs

CLI Prompts - Recommended Answers

• When prompted, select these recommended options:

• Where would you like your new app created? → Press Enter (usescurrent directory)

• Would you like to use the pre-push hook for linting? → Y(recommended)

• What is the name of your app? → my-nextjs-app (or your preferredname)

• What is your Sitecore hostname? → Your Sitecore instance URL (e.g.,https://mysite.dev.local)

• How would you like to fetch Layout and Dictionary data? → GraphQL ✅

• How would you like to prerender your application? → SSG ✅ (StaticSite Generation)

• Would you like to include any add-on initializers? → Press SPACE thenENTER ⚠️ (Critical - creates manifest files)

Reference Resource -https://insightswithvishalkhera.wordpress.com/2023/09/11/setup-sitecore-headless-sxanextjs/

You can use commandnpx create-sitecore-jss my-jss-next-app nextjs --fetchWith GraphQL --prerender SSG to create a JSS app.

Additonally you can refer the official doumentation ::

https://doc.sitecore.com/xp/en/developers/hd/latest/sitecore-headless-development/walkthrough--creating-a-jss-next-js-application-with-the-jss-initializer.html#create-a-jss-nextjs-application

You need to follow below mentioned steps

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 fromhttps://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

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

Here I'm adding links of blogs where you can find more details.

Setting Up Sitecore Headless with Next.js in Disconnected Mode

Setting Up Sitecore Headless with Next.js in connected Mode

Hope this help!! Let me know If you need further help...

• jss
• nextjs