Sitecore 10.4 + Docker + Next.js: A Complete Setup Guide for JSS Developers

 Setting Up Sitecore xp 10.4 with Docker and Next.js (JSS Connected Mode)

Setting up a modern Sitecore solution using Docker and Next.js enables rapid local development with a clean separation of front-end and back-end concerns. In this post, we’ll walk through how to set up Sitecore XP 10.4 using Docker along with Next.js in connected mode, using Sitecore JSS

Prerequisites

Before starting, make sure you have the following installed:

• Windows 10/11 Pro or Enterprise (for Docker Desktop with Hyper-V)

• Docker Desktop (configured for Windows containers)

• .NET SDK 6.0+

• Node.js v18+

• Git

• Sitecore Container Deployment Packages (WDPs)

• Sitecore License File

• JSS CLI

Steps: 
 
1. Enable hyer-v
     Control panel --->programs --> program and feature

2. Download and Install docker using below link 
     Click here to download and install docker

3. Install the template

•  Open PowerShell with administrator privileges.
•  Install Sitecore getting started templates by running the command 'dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json  
  

  You should get confirmation that 2 templates have been installed.If the installation is successful

  • apsnet.getttingstarted

  • nexjs.gettingstarted

  
  

4.Create the project solution

• Create an empty folder to store your projects (e.g c:\Projects)
• Open PowerShell with administrator privileges
  
  
• Check if you have the Internet Information Server running on port 443 by running the command 'Get-Process -Id (Get-NetTCPConnection -LocalPort 443).OwningProcess'
  
  
• If its running on port 443, you must stop it by running the command 'iisreset /stop'
  
  
• Check if you have Apache Solr or any other service running on port 8984: 'Get-Process -Id (Get-NetTCPConnection -LocalPort 8984).OwningProcess'
  
  
• If solr is running, you must stop it: 'Stop-Service -Name "<the name of your service>"'
   
• Go to your solutions folder  (c:\Projects) and create the scdemo solution and project:using this template, run the command 'dotnet new sitecore.nextjs.gettingstarted -n scdemo'

  Provide the following input 

  • Running command dotnet tool restore:

  • Running command powershell -File create-jss-project.ps1:

  • Sitecore hostname:

  • Fetch Layout method:

  • Method to prerender your application:

  • Just press enter when you are asked about additional languages

    Wait for npm install to run. It takes a while.     

A new folder should be created with the name of the project: scdemo

Go to \run\sitecore-xp0\.env and check if the correct version is set for sitecore 10.4.

 Also change the Package.props in the root directory to reflect
  <PlatformVersion>10.4.0</PlatformVersion>

5. Run the script init.ps1

• execute 'cd scdemo' to move into that folder
• To prepare the Sitecore container environment, run the script init.ps1 from the root directory (scdemo) of the project , Execute the following command: '.\init.ps1 -InitEnv -LicenseXmlPath "<C:\path\to\license.xml>" -AdminPassword "<desired password>"'
• After the command execution is done, it will ask you to set the NODE_EXTRA_CA_CERTS environment variable by running the command  'setx NODE_EXTRA_CA_CERTS <path to cert>'. Make sure to run it.
  

6.Run the script  up.ps1

• To download the Sitecore Docker images, install and configure the containers and JSS application, run the following script: '.\up.ps1'

• When prompted, in your browser, log in to Sitecore and accept the device authorization.
  

  
  
  
  
  
  
  
  
  

The script will continue and when it end will present you the sitecore backend login screen available in https://cm.scdemo.localhost/sitecore/

7.Testing the Front-end Next.js solution

•  Navigate to the folder src\rendering where the front-end Next.js app is located
• Run command 'jss start:connected'
• This will start the Next.js app and feed it with the data stored in Sitecore
• Open http://localhost:3000/ in your browser to check it