What is Sitecore JSS?

It is a complete SDK (Software Development Kit) for JavaScript developers that enables them to build full-fledged solutions using Sitecore and modern JavaScript UI libraries and frameworks (React, Angular, Vue, next js) and allows front end developers to work headless (i.e., without a running Sitecore instance).

 

What is Next JS?

Next.Js is a React framework that enables some additional features such as server-side rendering and static website generation. React is a JavaScript library traditionally used to build web applications that are rendered in the client's browser using JavaScript.

 

Why Sitecore JSS & Next JS?

 

Why Sitecore JSS?

1. Headless/Decoupling: It’s an architectural approach where developers can implement and host front and backend separately either in the same or different servers. This way, marketers have complete control over the frontend application and can update the website or application without needing to deploy any code or restart the server.

2. Performance: By decoupling the application, the frontend can be hosted from serverless computing services, providing improved response time.

3. Personalization: Sitecore’s API supports the delivery of dynamic content, which means you can deliver personalized content to almost any device or browser.

 

Why Next JS?

1. Built-in Routing: Next.js uses a file-based routing system. The server automatically converts all the files saved in the Pages folder to routes. This is unlike React applications that require installing React router and configuring it.

2. Built-in Image Optimization: Heavy images can slow down your site and lower its Google rankings. With Next.js, you can use the image component to optimize images automatically.

3. Built-in CSS Support: Next.js supports CSS modules. You don't need to spend extra time configuring it and can go straight to writing CSS styles.

 

How to Download Sitecore JSS?

To use a Sitecore headless rendering with Next jss compatibility, install the Sitecore headless rendering using the link below.

https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering/21x/Sitecore_Headless_Rendering_2100.aspx

Download the XP services as highlighted in the screenshot below

Installing the Headless Package in Sitecore Environment

• Open the Sitecore desktop (10.3 required, as the headless service XP is compatible).
• Click the installation wizard and upload the package that was downloaded from the link above.

• Choose the package and install.

 

Creating a JSS Application with Next JS

 

Creating an API Key

Step 1: First, create an API key in the Sitecore environment under System > Setting > services> API Keys. Right-click on API Key and insert an API key.

Step 2: Add the cors origin, allowed controls, and save. After saving the API Key, publish the API key.

Step 3: Check the response of the API key using the command below:

http://jss-app.dev.local/sitecore/api/layout/render/jss?item=/&sc_apikey={46ED4009-6060-4C1D-AXXXXXXXX}

Note: jss-app.dev.local (any name works) is an additional binding in IIS and in hosts from which the next js app will be running. The key highlighted in green is the item ID of the API key created in Sitecore. If the URL returns a json data indicates that the API key is running successfully.

 

Creating a JSS App with Next Js

Step 1: Create a folder ex. on the desktop inside which the JSS app will be created. (Ex- MY JSS APP). Open the folder in VS Code and install the Sitecore CLI using the below command
npm install -g @sitecore-jss/sitecore-jss-cli@19.0.0

Step 2: Create a next.js project using the following command rules
Rule: Jss create your project name framework name --branch release/19.0.0
Command: - jss create my-jss-project nextjs --branch release/19.0.0
Note: my-jss-project has been taken as the project name here.

Step 3: To run the application in disconnected mode, navigate to the project folder (cd my jss-project). Run the command jss start.

• The site will be running in a disconnected mode in localhost: 3000.
• To verify, type: http://localhost:3000/ in another tab of the browser.

• To edit the content of the webpage, first, stop the webpage using ctrl+c and type Y to terminate the current process. Then in the visual studio code navigate to data> routes> en.yml and change content. Run the jss start again to verify.

Deploying the App to Sitecore Environment

Step 1: On visual studio code type the below command:

jss setup

Fill the following with parameters below:

• Is your Sitecore instance on this machine or accessible via network share? Y
• Path to the Sitecore folder: C:\inetpub\wwwroot\xyzsc.dev.local\
• Sitecore hostname (e.g. http://myapp.local.siteco.re; see /sitecore/config; ensure added to hosts): http://jss-app.dev.local or https://jss-app.dev.local depending on the configuration (this binding is the same as used above)
• Sitecore import service URL [http://jss-app.dev.local/sitecore/api/jss/import]: leave this blank and hit enter
• Enter the Sitecore API KEY: {xxxxxxxxxxxxxxxxxx} (the item id of the API key created above)
• Please enter your deployment secret (32+ random chars; or press enter to generate one): Leave this as blank and hit enter

Step 2: Run the following command: jss deploy config

Step 3: A deployment secret key will be generated after this command.
The secret key is in the below-provided location: Project folder > scjssconfig.json.

Step 4: Copy the deployment secret key and browse the below path:
C:\inetpub\wwwroot\your instance name\App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.config

• Open the file and add the copied key in the file in the value section.

• Save the file.

 

Step 5: In the Visual studio code type the following command as shown below
jss deploy app -c –d

-c indicates: content
-d: indicates: dictionary

Step 6: The import will be completed and the app is deployed into Sitecore.

Step 7: The app is ready to run in connected Mode now. In the visual studio type the following command:
Jss start:connected

Type http: //localhost:3000/ in the browser.

Step 8: Users can now design and change the content from Sitecore and can save the changes to view in the front.

Conclusion

JSS enables Sitecore to be a powerful headless CMS and Next.js provides developers with a great experience building a hybrid static and server rendering. If you have any queries about the implementation of Sitecore JSS and Next.js, reach out to us for expert guidance.