Improvements are a constant in any app to address bugs or introduce more features. However, these introductions are deployed once the entire product is ready. Hence in the development cycle, there are possibilities to control resource usage.

Sitecore respects your resources to be utilized in a needful manner. Hence it allows you to work with certain functionalities in disconnected mode while the data can be deployed later to Sitecore. In Sitecore, you get the flexibility of 'disconnected mode' where the Sitecore CMS is not connected to your live web application. This gives you the flexibility to have maintenance or updation over the application or even when the CMS is being utilized to preview the final content before getting it published.

Next.JS is one of the prevalent JavaScript libraries with numerous features like server rendering, static site generation, and automatic code splitting. Here is a step-by-step guide to creating a NextJS application in disconnected mode and to setting it up in Sitecore.

Create a NextJS application: Disconnected Mode

• Create Folder(SampleNextJs)
• Open CMD(Admin Mode),navigate folder
• Install jss cli (npm install -g @sitecore-jss/sitecore-jss-cli)
• Create a NextJS app with the template(jss create next-jss-proj nextjs). If you face any issues, install the below version.
• npm install -g @sitecore-jss/sitecore-jss-cli@19.0.0
• jss create next-jss-Proj nextjs --branch release/19.0.0
• Navigate the Application folder, then start the site(jss start)

 

Set up a NextJS application to Sitecore

• Install Sitecore 10.3 XP0 on the local development environment if not already installed
• Install the downloaded package for Headless Service
• https://dev.sitecore.net/Downloads/Sitecore_Headless_Rendering/19x/Sitecore_Headless_Rendering_1900.aspx
• Navigate to: /Sitecore/system/Settings/Services/API Keys, and Create a new API Key, e.g.:- nextjskey

Create a custom binding

• For this, create a self-signed certificate with a custom domain name in this case (if it does not exist)– dev.local( New-SelfSignedCertificate -CertStoreLocation Cert:\LocalMachine\my -DnsName "*.dev.local" -FriendlyName "*.dev.local " -NotAfter (Get-Date).AddYears(25) )
• Create a domain in its server with HTTPS, Then add the domain name to the host file.
• Setup JSS
• Open the application in vs code, and open the terminal window.

• Run “jss setup” and follow the below setup.
• Deploy the config(jss deploy config ) , After deploy config files added in sitecore instances path(C:\inetpub\wwwroot\sitecoredatasc.dev.local\App_Config\Include\zzz)
• Open the file C:\inetpub\wwwroot\sitecoredatasc.dev.local\App_Config\Sitecore\JavaScriptServices\Sitecore.JavaScriptServices.ViewEngine.Http.config , add secret key, secret key is generated and stored in <>\sitecore\config\next-jss-prj.deploysecret.config

• In VSCode open the .env, add Hostname,api key and secretkey ,this values available in scjssconfig.json file
• Import Data NextJs application to Sitecore( jss deploy app -c -d --acceptCertificate "571ac727bfdf3d0f734a71c92207ea7022ccf8e9")

• Start with connected Mode,run website, If you receive this error- run “$env:NODE_TLS_REJECT_UNAUTHORIZED=0” cmd

Conclusion

In Sitecore, the disconnected mode in context for the Next.js application will allow you to create and run the Next.js application in a different environment than the live web application. In contrast, the application would be configured to fetch the data and content from a disconnected instance of the Sitecore CMS.

Such a procedure would make it effortless and convenient for the developers to perform and alter the application by having a preview of the content without affecting the live application running. For more Sitecore-related concerns or queries connect with us.