How to create a Sitecore JSS-Next.js app using JSS CLI

Written by Sudhir Kumar | Jun 19, 2021 6:30:00 PM

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

To run the app in connected mode, use below command

jss start:connected

Happy Sitecoreing !! Thanks Sitecore

View full post