Sitecore JSS (JavaScript Service) is a development framework aimed at building headless applications using modern JavaScript Frameworks Like React, Angular, and Vue.js. Next.js on the other hand, is a React framework that enables server-side rendering (SSR) and static site generation (SSG). Among other things, it has features like automatic code splitting, server-side rendering, and easy routing, making it an ideal choice for building scalable and performant web applications.

By combining Sitecore JSS with the Next.js framework, we can extract the benefits of both frameworks enabling a cost as well as a time-effective approach to development.

Creating and Deploying Your Project

By following the Code First Development approach to creating a Sitecore JSS NextJS app, we can build applications without having any Sitecore Instance. Once we create our Sitecore JSS Next.js app, we move toward deploying it to Sitecore Instance.

To do so, we create our Sitecore JSS Next.js app using JSS CLI.

The following steps will help ensure your project is appropriately deployed:

1. Begin by installing Node.js on your Laptop/Desktop using the URL: https://nodejs.org/en.
   
   • Open cmd in Administrator mode and check Node Version by Command node -v 
   • For this demonstration, I have installed node having version 16.14.2
2. Install JSS CLI by following the steps listed below:   
   • Open cmd in Administrator mode
   • Run this command: npm install -g @sitecore-jss/sitecore-jss-cli@19.0.0
   • The command will take approximately 2 to 4 minutes to run.
   • Once it begins running, check the version of the installed JSS CLI using the command JSS--version
3. Create a folder where you wish to create your JSS App   
   • Once again, for this demonstration, I have created a new folder in D Drive using this command: mkdir D:\SitecoreJSSNextApp
   • Go to that directory using command D: then cd SitecoreJSSNextApp
4. Create your Sitecore JSS Next.js App   
   • If your JSS CLI version is <=20, then you must use the command: jss create myjssnextapp nextjs --branch release/19.0.0. Here, myjssnextapp is the app name while nextjs is the App Type.
   • If, on the other hand, your JSS CLI version is >20, then you must use the command: npm init sitecore-jss nextjs. Here, I have installed JSS CLI version 19 because of which I am using the first command to create the App.
5. After completing the Installation process, open your newly created App in Visual Studio Code and then proceed with the following steps:    
   • Open a terminal in Visual Studio code and Run the Command: jss start
     It will show a message, as displayed below in the snapshot and the app will begin running in Disconnected mode on port: 3000.
     

     

      

   • Now, you can hit http://localhost:300 URL and the page will be like the below snapshot.
     
     

     

   • Disconnected Mode means that the app, at that moment, is not connected to Sitecore Instance.
   • Connected Mode means that the app is connected to Sitecore Instance and is loading data from the Sitecore Content Tree.
     
      

Now we have created the JSS NextJs App. To run this app in Connected mode, we must Install this Software on our system.

1. Sitecore XP 10.2: Vanilla Version for our Sitecore. You may also install another version.
2. Sitecore Headless Services 19.0.0: Sitecore module for Headless and JSS. You may install another version that is compatible with Sitecore Version.
   
    

You can check the installed Headless Service on Sitecore in the following manner:

Now, we proceed toward deploying our JSS Next.js app to the Sitecore Instance. For this, we look at the following steps:

• Firstly, we must create Sitecore API Key
  • Login to Sitecore Instance and go to the item which has this path: /sitecore/system/Settings/Services/API Keys.
  • Right click on the API Keys item and click on Insert, followed by inserting the API Key.
    

    

    Here, I have named the item as nextjsapikey and made the following changes in the field:

    

  • We will keep API Key as Item ID of item nextjsapikey. For me, it is {0ED43143-32F0-46EA-A051-D030362FBDA2} 

    

    You can open your layout service using the URL: https://hostname/sitecore/api/layout/render/jss?&item=/&sc_lang=en&sc_apikey= Your API key and sc_mode=normal after deployment of your app to the Sitecore Instance. Hostname= Host name of the Website present into JSS Next.js app at path sitecore\config\myjssnectapp.config.

     
• Open the terminal in Visual Studio Code and Run the Command: jss setup. Provide the information as displayed in the image below:
  

  

• To deploy your configuration, run the command: jss deploy config 

  

• Now add HostName of the Website present into the JSS Next.js APP to localhost in Host File at path: C:\Windows\System32\drivers\etc\hosts
  
  • You will get the host name of the website as shown below:

    

  • Now create a binding in the Sitecore Instance on IIS with the same hostname that you added to the host file. To do this, Open IIS and click on your Sitecore Instance and then click on Binding like below.

    

• Now, we are ready to deploy our app to the Sitecore Instance.
  • Run this command jss deploy app –c –d. Here c means Content and d means Dictionary

    

  • Once the Import is completed, you will get your Next.js App in the content tree of Sitecore Instance as below

    

• Now, you can run your JSS Next.js App into Connected Mode by using the following command:

  jss start:connected.

  Any changes made to the Sitecore will be reflected on the page

Conclusion

Sitecore JSS Next.js app allows you to create reusable components as well as handle dynamic routing. This app can be developed and deployed independently, giving you the flexibility to update your front end without affecting the underlying Sitecore content management system.

If you are keen to learn more about how to combine Sitecore JSS with the NextJS framework to develop applications for your business, reach out to us for expert consultation. Our team of Sitecore experts can help you extract the best out of these two frameworks to build modern, scalable, and personalized web applications while leveraging the capabilities of Sitecore's content management system.