Do you want to explore Sitecore JSS and Next.js? This blog is perfect to start with creating a Sitecore JSS -Next.js app using JSS CLI.
Pre-requisites:
Operating system which supports Node. (I am using Windows 10) Install Node. Recommended to use latest LTS release.
If node is already installed, you can check the version using powershell.
Let’s now start!!
Install JSS CLI using command below.
Open powershell and run the below command
npm install -g @sitecore-jss/sitecore-jss-cli
You can validate your installation by running the below command
jss –help Create the Next.js application.
Open powershell and run the below command
Firstly set the path of the folder where you want to create the app
cd C:\SitecoreJSSNextJS
and then run below command
jss create mynextjsapp nextjs
where
mynextjsapp is the name of your application
You will see a folder with all the artefacts.
Open the app folder in Visual Studio Code.
Now to run the application in
disconnected mode, open a terminal in VS Code and run the below command
jss start
The app will be built and a local development server will be started. Hit the url http://localhost:3000/
To run the app in connected mode, run the below command
jss start:connected
When I try to run the above command, I get the below error by hitting url http://localhost:3000/
Before trying to run in connected mode, please install the Sitecore Javascript Services or Sitecore Headless Rendering package to your sitecore instance based on your version of Sitecore. (if not already completed)
and follow below steps to link and deploy app to a running sitecore instance. Below are the steps to do it.
Create a Sitecore Api Key
1.1 Login to sitecore and open content editor. Navigate to path /sitecore/system/Settings/Services/API Keys
1.2 Create an API Key and provide a name
1.3. Set the properties as below of the API Key created. (These values are for local development setup)
1.4. Keep the API Key item id. In my case it is {3F9C5109-1785-4578-856D-A57209D883A8}
Run below command
jss setup
Put the values of these as per below snapshot and press enter
If you do not have SSL then put host name without SSL
Run below command to deploy the config files to your sitecore instance.
jss deploy config
Add the host name mynextjsapp.dev.local pointing to localhost in hosts file located at C:\Windows\System32\drivers\etc.
and add the same host name in sitecore instance binding on IIS
Now run the deploy command
jss deploy items –includeContent –includeDictionary
In local development if you see any issue with certificate or SSL you can
Disable TLS by running below command and restart Visual Studio
$env:NODE_TLS_REJECT_UNAUTHORIZED=0
Or you can follow below article to fix this SSL issue.
https://jss.sitecore.com/docs/fundamentals/troubleshooting/node-certificates
Build your jss solution using below command
jss build
Login to Sitecore and publish the site.
To run the app in connected mode, use below command
jss start:connected
Happy Sitecoreing !! Thanks Sitecore
