Sitecore JSS with Next.js - Getting started

Sitecore JavaScript Rendering SDKs (JSS)

The Sitecore JavaScript Rendering SDKs (JSS) represent a set of JavaScript packages and sample applications that add first-class support for JavaScript frameworks and enable the development of modern applications that consume Sitecore data.

Prerequisites for Installation

1. Node.js (LTS version)
2. .NET Core 3.1 SDK
3. .NET Framework 4.8 SDK
4. Docker, with Windows Containers enabled

Installation

1. Open Powershell as Administrator

2. Run the below command:

     dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json

   It should install the sitecore.nextjs.gettingstarted template.

   

3. Ensure that ports 443 and 8984 are open. Run iisreset /stop to stop IIS and free port 443.
   Run the below commands to check and close the process on port 8984.

   Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess
   Stop-Service -Name "<the name of your service>"

4. Change directory on Powershell to your solution folder.

5. Create your solution using the below command:

   dotnet new sitecore.nextjs.gettingstarted -n MyProject

   The name of the solution here is, MyProject. It can be changed to any name as desired.

6. We will need to confirm some options when running this command.

   

7. Change directory on Powershell to your project folder that will be created now.

   cd .\MyProject\

8. Run init.ps1 on Powershell with the License file path and the Admin Password.

   .\init.ps1 -InitEnv -LicenseXmlPath "C:\license\license.xml" -AdminPassword "b"

9. You will need to set the NODEEXTRACA_CERTS environment variable with the certificates created.

   setx NODE_EXTRA_CA_CERTS C:\Users\user.name\AppData\Local\mkcert\rootCA.pem

10. After running the above command, close and open your Powershell instance. Change directory to your project root.

11. Run the below command on Powershell.

    .\up.ps1

    The script will build and start your containers.

12. I faced an issue starting my xdb and cortex containers in this step. After checking the logs, it turned out that my license file was invalid. I replaced it with a newer license file. I ran the up.ps1 script again, and this time there were no issues.
13. The script will open a prompt on your browser after starting the containers. Login to Sitecore and grant the permissions.
14. After the script completes, it will open the CMS instance and the rendering host.

I will be blogging about my further learnings with JSS.

Happy Sitecoring!