Commands to create sitecore jss nextjs project

Question

I want to create a Sitecore JSS project using Next.js. I’m looking for the exact CLI commands to scaffold the project, including the recommended options (like GraphQL for data fetching and SSG for pre-rendering).

I’ve seen tutorials, but the prompts during jss create are confusing, and I want a step-by-step command sequence to create a working project ready to deploy.

Could someone please share the full commands or steps for creating a Sitecore JSS + Next.js app?

Sitecore version: 10.4

Answer 1

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

Here's the exact 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.4
npx create-sitecore-jss my-nextjs-app --templates nextjs

# Alternative using npm init
npm 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 (uses current 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 preferred name)

• 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 ✅ (Static Site Generation)

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

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

Answer 2

You can use command npx 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

Answer 3

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 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

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...