Updated SUGCON sites to Content-SDK v2 (#585)

* Updated SUGCON sites to Content-SDK v2

* Copilot PR Review changes

* Fixed incorrect node version for GH Action

* Fixed linting config errors after version upgrade

Author: robearlam

.github/workflows/build_NextJs.yml

@@ -25,7 +25,7 @@ jobs:
     - uses: actions/checkout@v3
     - uses: actions/setup-node@v3
       with:
-        node-version: 22.11.0
+        node-version: 24
     - run: npm install
     - run: npm run build
     - run: npm run lint

headapps/Sugcon2024/.env.remote.example

@@ -19,16 +19,22 @@ SITECORE_EDGE_CONTEXT_ID=
 # Will be used as a fallback if separate SITECORE_EDGE_CONTEXT_ID value is not provided
 NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID=
 
+# Optional: custom Sitecore Edge Platform hostname (hostname or full URL).
+NEXT_PUBLIC_SITECORE_EDGE_PLATFORM_HOSTNAME=
+
+# Optional: custom Experience Edge hostname for media URL rewriting (e.g. staging).
+SITECORE_EXPERIENCE_EDGE_HOSTNAME=
+
 # An optional Sitecore Personalize scope identifier.
 # This can be used to isolate personalization data when multiple XM Cloud Environments share a Personalize tenant.
 # This should match the PAGES_PERSONALIZE_SCOPE environment variable for your connected XM Cloud Environment.
 NEXT_PUBLIC_PERSONALIZE_SCOPE=
 
 # Timeout (ms) for Sitecore CDP requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_CDP_TIMEOUT=
+PERSONALIZE_PROXY_CDP_TIMEOUT=
 
 # Timeout (ms) for Sitecore Experience Edge requests to respond within. Default is 400.
-PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
+PERSONALIZE_PROXY_EDGE_TIMEOUT=
 
 # Sitecore Content SDK npm packages utilize the debug module for debug logging.
 # https://www.npmjs.com/package/debug
@@ -42,3 +48,4 @@ PERSONALIZE_MIDDLEWARE_EDGE_TIMEOUT=
 # Client ID and Secret used for Design Library functionality
 SITECORE_AUTH_CLIENT_ID=
 SITECORE_AUTH_CLIENT_SECRET=
+SITECORE_RENDERINGHOST_NAME=

headapps/Sugcon2024/.sitecore/component-map.ts

@@ -49,7 +49,7 @@ import * as ActionBanner from 'src/components/basic-components/action-banner/Act
 export const componentMap = new Map<string, NextjsContentSdkComponent>([
   ['BYOCWrapper', BYOCServerWrapper],
   ['FEaaSWrapper', FEaaSServerWrapper],
-  ['Form', Form],
+  ['Form', { ...Form, componentType: 'client' }],
   ['LayoutConstants', { ...LayoutConstants }],
   ['Navigation', { ...Navigation, componentType: 'client' }],
   ['Header', { ...Header }],

headapps/Sugcon2024/eslint.config.mjs

@@ -1,21 +1,11 @@
-import { dirname } from "path";
-import { fileURLToPath } from "url";
-import { FlatCompat } from "@eslint/eslintrc";
-
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
-
-const compat = new FlatCompat({
-  baseDirectory: __dirname,
-});
+import nextPlugin from "@next/eslint-plugin-next";
+import reactPlugin from "eslint-plugin-react";
+import hooksPlugin from "eslint-plugin-react-hooks";
+import importPlugin from "eslint-plugin-import";
+import tseslint from "typescript-eslint";
 
 const eslintConfig = [
-  ...compat.extends("next/core-web-vitals", "next/typescript"),
-  { 
-    rules: {
-      // Don't force alt for <Image/> (sourced from Sitecore media)
-      "jsx-a11y/alt-text": "off",
-    },
+  {
     ignores: [
       "node_modules/**",
       ".next/**",
@@ -24,6 +14,31 @@ const eslintConfig = [
       "next-env.d.ts",
     ],
   },
+  ...tseslint.configs.recommended,
+  {
+    files: ["**/*.{ts,tsx,js,jsx}"],
+    plugins: {
+      "@next/next": nextPlugin,
+      "react": reactPlugin,
+      "react-hooks": hooksPlugin,
+      "import": importPlugin,
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
+      ...reactPlugin.configs.recommended.rules,
+      ...hooksPlugin.configs.recommended.rules,
+      // Don't force alt for <Image/> (sourced from Sitecore media)
+      "jsx-a11y/alt-text": "off",
+      // React 17+ doesn't require importing React
+      "react/react-in-jsx-scope": "off",
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
 ];
 
 export default eslintConfig;

headapps/Sugcon2024/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.