Skip to content

Setup Headless SXA project with Next js in Sitecore JSS.

  1. Install Sitecore 10.3 XP0 on local machine

Link sitecore 10.3XPO :-

Sitecore Downloads

  • Install Powersehll Extensions on your local Sitecore instance

Install SXA module

Sitecore Experience Accelerator on your local Sitecore instance

See the Sitecore Experience Accelerator 10.3.0 dowload page

Once you have the above installed the local instance should have options to create a Headless Tenant and Folder

Create a Headless Tenant and Folder

  Ensure all the search index and rebuilt

Install Node js Download | Node.js ( Latest whilst writing this blog was v18.14.0

Should create a tenant successfully

Now create a Headless Site

Select the modules to install

Keep the Site settings as is for now and will generate the deployment secret later

Click the ok button

Site should be crated within the tenant

Setup the rendering host :-

Site Settings – Check for the rendering host- should have set to Default

/sitecore/content/mycompany/retail/Settings/Site Grouping/retail

Find the Default rendering host on this location-

/sitecore/system/Settings/Services/Rendering Hosts/Default

Server side rendering engine endpoint URL:-


Server side rendering engine application URL:- 


Application name:- e.g :- demoheadless

Where is the above value coming from – when a next js app is created by default it is hosted on port 3000. Please see section below- NEXT STEPS

Create JSS Api key : –

/sitecore/system/Settings/Services/API Keys

Set the CORS and Allowed Controllers to all domains. Set this to *

Install JSS globally : –

Link install globally CLI: –

Sitecore CLI page link

open PowerShell in Admin mode:- and run below command

npm install -g @sitecore-jss/sitecore-jss-cli

Initialise JSS App:-

Make sure App name is same

Use following command-

npx create-sitecore-jss –templates nextjs,nextjs-sxa –appName demoheadless –hostName –fetchWith GraphQL

Possible values for templates arguments-

Base templates– nextjs. Other possible values-

Other templates

appName – enter the app name provided in the rendering host. See Setup the rendering host section

hostname– enter the hostname of the Sitecore instance

 Where would you like your new app created? – provide the location to create a next jss app

 How would you like to prerender your application? – Select SSG

Following files will be created in a new folder (demoheadless) –

Setup JSS App : –

Run this command:- jss setup

Enter yes

Path to the Sitecore folder :- C:\inetpub\wwwroot\

Sitecore hostname:-

Api key: –

Finally create your next js App

Open your app in vs code


This path past in vs code below location

This is your JSS_EDITING_SECRET key :-

Next steps: –

Go to .env fills

Thean run jss deploy config

Note the config was deployed to C:\inetpub\wwwroot\\App_Config\Include\zzz folder in the Sitecore instance

Start your App this command : jss start:connected

Application should listen to http://localhost:3000

Give the Error:-

Then run this command : – $env:NODE_TLS_REJECT_UNAUTHORIZED=0

After run this cammnd app restart : –

Lets add some content, for this open the Home page in experience editor and see this error-

Error- Connection to your rendering host failed with an Unauthorized error. Ensure the JSS Editing Secret is configured.

Update the JSS Editing Secret in Sitecore instance at following path (best practice-you have to patch the config instead of updating the Sitecore configs directly)


Open this file in notepad++

Update the value to the deployment secret used earlier in .env file-

And past here API-SECRET:-

After update-

Layout Services

Lets check if the layout services are accessible-

Get Item data (home) and secret key-{C86E4E8E-0745-4692-ADA6-1D970926FD1C}&sc_apikey={A1B5B260-FC74-412D-936B-20EFC751F4D7}


Share this post on social!

Leave a Reply

Your email address will not be published. Required fields are marked *