Upgrade to Sitecore 10.2, JSS 20.0.1 and Next.js v12

examples/helix-basic-nextjs/.env

@@ -11,21 +11,21 @@ RENDERING_HOST=www.basic-company-nextjs.localhost
 # Sitecore Docker registry and platform version.
 # The ltsc2019-based images are used by default here. SAC images are also available.
 SITECORE_DOCKER_REGISTRY=scr.sitecore.com/sxp/
-SITECORE_VERSION=10.1-ltsc2019
+SITECORE_VERSION=10.2-ltsc2019
 
 # The sitecore\admin and SQL 'sa' account passwords for this environment are configurable here.
 SITECORE_ADMIN_PASSWORD=
 SQL_SA_PASSWORD=
 
 # Other supporting images, including Sitecore modules and Docker tools
-MANAGEMENT_SERVICES_IMAGE=scr.sitecore.com/sxp/modules/sitecore-management-services-xm1-assets:4.0-1809
-HEADLESS_SERVICES_IMAGE=scr.sitecore.com/sxp/modules/sitecore-headless-services-xm1-assets:18.0-1809
-TOOLS_IMAGE=scr.sitecore.com/tools/sitecore-docker-tools-assets:10.1-1809
+MANAGEMENT_SERVICES_IMAGE=scr.sitecore.com/sxp/modules/sitecore-management-services-xm1-assets:4.2.1-1809
+HEADLESS_SERVICES_IMAGE=scr.sitecore.com/sxp/modules/sitecore-headless-services-xm1-assets:20.0.1-1809
+TOOLS_IMAGE=scr.sitecore.com/tools/sitecore-docker-tools-assets:10.2.0-1809
 TRAEFIK_IMAGE=traefik:v2.2.0-windowsservercore-1809
 
 # Windows and Node.js version for JSS
 NODEJS_PARENT_IMAGE=mcr.microsoft.com/windows/nanoserver:1809
-NODEJS_VERSION=14.15.3
+NODEJS_VERSION=18.4.0
 
 # MSBuild configuration and the target build stage for the Rendering Host image.
 BUILD_CONFIGURATION=debug

examples/helix-basic-nextjs/docker-compose.override.yml

@@ -76,12 +76,23 @@ services:
     build:
       context: ./docker/build/mssql
       args:
-        PARENT_IMAGE: ${SITECORE_DOCKER_REGISTRY}sitecore-xm1-mssql:${SITECORE_VERSION}
-        HEADLESS_SERVICES_IMAGE: ${HEADLESS_SERVICES_IMAGE}
+        PARENT_IMAGE: ${SITECORE_DOCKER_REGISTRY}nonproduction/mssql-developer:2017-${SITECORE_VERSION}
+    mem_limit: 2GB
     volumes:
       - type: bind
         source: .\docker\data\sql
         target: c:\data
+
+  mssql-init:
+    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-xm1-mssql-init:${SITECORE_VERSION}
+    build:
+      context: ./docker/build/mssql-init
+      args:
+        PARENT_IMAGE: ${SITECORE_DOCKER_REGISTRY}sitecore-xm1-mssql-init:${SITECORE_VERSION}
+        HEADLESS_SERVICES_IMAGE: ${HEADLESS_SERVICES_IMAGE}
+    depends_on:
+      mssql:
+        condition: service_healthy
 
   # Mount our Solr data folder and use our retagged Solr image.
   # Some modules (like SXA) also require additions to the Solr image.
@@ -103,11 +114,11 @@ services:
   # Use our retagged Identity Server image.
   # Configure for a mounted license file instead of using SITECORE_LICENSE.
   id:
-    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-id:${VERSION:-latest}
+    image: ${REGISTRY}${COMPOSE_PROJECT_NAME}-id6:${VERSION:-latest}
     build:
       context: ./docker/build/id
       args:
-        PARENT_IMAGE: ${SITECORE_DOCKER_REGISTRY}sitecore-id:${SITECORE_VERSION}
+        PARENT_IMAGE: ${SITECORE_DOCKER_REGISTRY}sitecore-id6:${SITECORE_VERSION}
     volumes:
       - ${HOST_LICENSE_FOLDER}:c:\license
     environment:

examples/helix-basic-nextjs/docker-compose.yml

@@ -45,7 +45,7 @@ services:
         target: c:\data
   solr:
     isolation: ${ISOLATION}
-    image: ${SITECORE_DOCKER_REGISTRY}nonproduction/solr:8.4.0-${SITECORE_VERSION}
+    image: ${SITECORE_DOCKER_REGISTRY}nonproduction/solr:8.8.2-${SITECORE_VERSION}
     ports:
       - "8984:8983"
     volumes:
@@ -54,6 +54,8 @@ services:
         target: c:\data
     environment:
       SOLR_MODE: solrcloud
+    healthcheck:
+      test: ["CMD", "powershell", "-command", "try { $$statusCode = (iwr http://solr:8983/solr/admin/cores?action=STATUS -UseBasicParsing).StatusCode; if ($$statusCode -eq 200) { exit 0 } else { exit 1} } catch { exit 1 }"]
   solr-init:
     isolation: ${ISOLATION}
     image: ${SITECORE_DOCKER_REGISTRY}sitecore-xm1-solr-init:${SITECORE_VERSION}
@@ -76,7 +78,7 @@ services:
       Sitecore_Sitecore__IdentityServer__CertificateRawDataPassword: ${SITECORE_ID_CERTIFICATE_PASSWORD}
       Sitecore_License: ${SITECORE_LICENSE}
     healthcheck:
-      test: ["CMD", "powershell", "-command", "C:/Healthchecks/Healthcheck.ps1"]
+      test: ["CMD", "pwsh", "-command", "C:/Healthchecks/Healthcheck.ps1"]
       timeout: 300s
     depends_on:
       mssql:

examples/helix-basic-nextjs/docker/build/id/Dockerfile

@@ -2,4 +2,10 @@
 
 ARG PARENT_IMAGE
 
-FROM ${PARENT_IMAGE}
+FROM ${PARENT_IMAGE}
+
+SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
+
+WORKDIR C:\Identity
+
+ENTRYPOINT ["dotnet", "Sitecore.IdentityServer.Host.dll"]

examples/helix-basic-nextjs/docker/build/mssql-init/Dockerfile

@@ -0,0 +1,12 @@
+# escape=`
+
+ARG PARENT_IMAGE
+ARG HEADLESS_SERVICES_IMAGE
+
+FROM ${HEADLESS_SERVICES_IMAGE} AS headless_services
+FROM ${PARENT_IMAGE}
+
+SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
+
+# Add Headless Services module
+COPY --from=headless_services /module/db /jss_data

examples/helix-basic-nextjs/docker/build/mssql/Dockerfile

@@ -1,14 +1,7 @@
 # escape=`
 
 ARG PARENT_IMAGE
-ARG HEADLESS_SERVICES_IMAGE
 
-FROM ${HEADLESS_SERVICES_IMAGE} AS headless_services
 FROM ${PARENT_IMAGE}
 
 SHELL ["powershell", "-Command", "$ErrorActionPreference = 'Stop'; $ProgressPreference = 'SilentlyContinue';"]
-
-# Copy and init the JSS / Headless Services Module
-COPY --from=headless_services C:\module\db C:\jss_data
-RUN C:\DeployDatabases.ps1 -ResourcesDirectory C:\jss_data; `
-    Remove-Item -Path C:\jss_data -Recurse -Force;

examples/helix-basic-nextjs/sitecore.json

@@ -4,10 +4,10 @@
     "src/*/*/*.module.json"
   ],
   "plugins": [
-    "Sitecore.DevEx.Extensibility.Serialization@4.0.0",
-    "Sitecore.DevEx.Extensibility.Publishing@4.0.0",
-    "Sitecore.DevEx.Extensibility.Indexing@4.0.0",
-    "Sitecore.DevEx.Extensibility.ResourcePackage@4.0.0"
+    "Sitecore.DevEx.Extensibility.Serialization@4.1.0",
+    "Sitecore.DevEx.Extensibility.Publishing@4.1.0",
+    "Sitecore.DevEx.Extensibility.Indexing@4.1.0",
+    "Sitecore.DevEx.Extensibility.ResourcePackage@4.1.0"
   ],
   "serialization": {
     "defaultMaxRelativeItemPathLength": 100,

examples/helix-basic-nextjs/src/Project/BasicCompany/nextjs/next.config.js

@@ -1,9 +1,9 @@
 const jssConfig = require('./src/temp/config');
 const packageConfig = require('./package.json').config;
-const { JSS_MODE_DISCONNECTED } = require('@sitecore-jss/sitecore-jss-nextjs');
+const constants = require('@sitecore-jss/sitecore-jss-nextjs').constants;
 
 const disconnectedServerUrl = `http://localhost:${process.env.PROXY_PORT || 3042}/`;
-const isDisconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED;
+const isDisconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
 
 // A public URL (and uses below) is required for Sitecore Experience Editor support.
 // This is set to http://localhost:3000 by default. See .env for more details.

examples/helix-basic-nextjs/src/Project/BasicCompany/nextjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "basiccompany",
   "description": "Application utilizing Sitecore JavaScript Services and Next.js",
-  "version": "16.0.0",
+  "version": "20.0.1",
   "private": true,
   "config": {
     "appName": "basiccompany",
@@ -14,8 +14,8 @@
     "language": "en"
   },
   "engines": {
-    "node": ">=8.1",
-    "npm": ">=5.6.0",
+    "node": ">=12",
+    "npm": ">=6",
     "yarn": "yarn is not supported, please use npm"
   },
   "author": {
@@ -31,8 +31,9 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@sitecore-jss/sitecore-jss-nextjs": "^16.0.0",
-    "@sitecore-jss/sitecore-jss-tracking": "^16.0.0",
+    "@apollo/react-hooks": "^4.0.0",
+    "@sitecore-jss/sitecore-jss-nextjs": "^20.0.3",
+    "@sitecore-jss/sitecore-jss-tracking": "^19.0.2",
     "apollo-cache-inmemory": "~1.6.3",
     "apollo-client": "~2.6.4",
     "apollo-link": "~1.2.13",
@@ -44,10 +45,10 @@
     "graphql": "~14.5.7",
     "graphql-request": "^3.4.0",
     "graphql-tag": "^2.11.0",
-    "next": "^10.0.3",
+    "next": "^12.1.0",
     "next-localization": "^0.10.0",
     "nprogress": "~0.2.0",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-apollo": "~3.1.1",
     "react-dom": "^17.0.1",
     "swr": "^0.4.2"
@@ -60,9 +61,9 @@
     "@graphql-codegen/typescript-operations": "^1.17.9",
     "@graphql-codegen/typescript-react-apollo": "^2.1.1",
     "@graphql-codegen/typescript-resolvers": "^1.17.10",
-    "@sitecore-jss/sitecore-jss-cli": "^16.0.0",
-    "@sitecore-jss/sitecore-jss-dev-tools": "^16.0.0",
-    "@sitecore-jss/sitecore-jss-manifest": "^16.0.0",
+    "@sitecore-jss/sitecore-jss-cli": "^20.0.1",
+    "@sitecore-jss/sitecore-jss-dev-tools": "^20.0.1",
+    "@sitecore-jss/sitecore-jss-manifest": "^19.0.2",
     "@storybook/addon-actions": "^6.1.16",
     "@storybook/addon-essentials": "^6.1.16",
     "@storybook/addon-links": "^6.1.16",
@@ -91,7 +92,7 @@
     "npm-run-all": "~4.1.5",
     "prettier": "^2.1.2",
     "ts-node": "^9.0.0",
-    "typescript": "^4.0.2",
+    "typescript": "~4.4.3",
     "yaml-loader": "^0.6.0"
   },
   "scripts": {

examples/helix-basic-nextjs/src/Project/BasicCompany/nextjs/scripts/bootstrap.ts

@@ -1,5 +1,5 @@
 import { generateConfig } from './generate-config';
-import { JSS_MODE_DISCONNECTED } from '@sitecore-jss/sitecore-jss-nextjs';
+import { constants } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /*
   BOOTSTRAPPING
@@ -8,7 +8,7 @@ import { JSS_MODE_DISCONNECTED } from '@sitecore-jss/sitecore-jss-nextjs';
   and the global config module.
 */
 
-const disconnected = process.env.JSS_MODE === JSS_MODE_DISCONNECTED;
+const disconnected = process.env.JSS_MODE === constants.JSS_MODE.DISCONNECTED;
 
 /*
   CONFIG GENERATION

examples/helix-basic-nextjs/src/Project/BasicCompany/nextjs/src/lib/graphql-sitemap-service.ts

@@ -3,6 +3,8 @@ import config from 'temp/config';
 
 const graphQLSitemapService = new GraphQLSitemapService({
   endpoint: config.graphqlEndpoint,
+  apiKey: config.sitecoreApiKey,
+  siteName: config.jssAppName,
 });
 
 export { graphQLSitemapService };

examples/helix-basic-nextjs/src/Project/BasicCompany/nextjs/tsconfig.json

@@ -2,10 +2,18 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "components/*": ["src/components/*"],
-      "lib/*": ["src/lib/*"],
-      "temp/*": ["src/temp/*"],
-      "assets/*": ["src/assets/*"]
+      "components/*": [
+        "src/components/*"
+      ],
+      "lib/*": [
+        "src/lib/*"
+      ],
+      "temp/*": [
+        "src/temp/*"
+      ],
+      "assets/*": [
+        "src/assets/*"
+      ]
     },
     "target": "es5",
     "lib": [
@@ -30,7 +38,8 @@
     "noImplicitReturns": true,
     "noImplicitThis": true,
     "noUnusedLocals": true,
-    "noUnusedParameters": true
+    "noUnusedParameters": true,
+    "incremental": true
   },
   "include": [
     "next-env.d.ts",