Sitecore · art-alexeyenko · Oct 31, 2024 · Sep 20, 2024 · Sep 22, 2024 · Oct 23, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -89,6 +89,14 @@ Our versioning strategy is as follows:
 
 * `[templates/angular]``[templates/node-xmcloud-proxy]``[templates/node-headless-ssr-proxy]``[templates/node-headless-ssr-experience-edge]` Adjust out of box .gitignore rules
 
+## 22.2.0
+
+### 🛠 Breaking Change
+
+* `[templates/nextjs-xmcloud]` CloudSDK dependencies have been updated to 0.4.0 ([#1933](https://github.com/Sitecore/jss/pull/1933))
+* `[templates/nextjs-xmcloud]` `@sitecore/components` dependency has been updated to 2.0.0 ([#1933](https://github.com/Sitecore/jss/pull/1933)) 
+* `[templates/nextjs-xmcloud]` `lib/context` import has been removed. Values from `temp/config` can be used instead. ([#1933](https://github.com/Sitecore/jss/pull/1933)) 
+
 ## 22.1.4
 
 ### 🐛 Bug Fixes

diff --git a/docs/upgrades/22.x/22.2.md b/docs/upgrades/22.x/22.2.md
@@ -0,0 +1,110 @@
+# Nextjs - XMCloud
+
+* Update the `@sitecore/components` dependency to `~2.0.0`
+* Update the `@sitecore-cloudsdk/events` dependency to `^0.4.0`
+* Add the dependency on `@sitecore-cloudsdk/core` with version `^0.4.0`. You should now have the below dependencies present:
+```
+    "@sitecore/components": "~2.0.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
+```
+* Remove the `src/lib/context` folder
+
+* Update `src/Bootstrap.tsx`:
+    * Remove the context import:
+    ```
+        import { context } from 'src/lib/context';
+    ```
+    * Add imports required for CloudSDK setup:
+    ```
+        import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+        import '@sitecore-cloudsdk/events/browser';
+        import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';
+    ```
+    * Remove the context.init() call:
+    ```
+        context.init({
+            siteName: props.site?.name || config.sitecoreSiteName,
+            pageState: props.layoutData?.sitecore?.context?.pageState,
+        });
+    ```
+    * Replace it with CloudSDK initialization, making sure it is performed within `useEffect()` and only in normal, non-dev mode:
+    ```
+        const [eventsInitDone, setEventsInitDone] = useState(false);
+        useEffect(() => {
+            const pageState = props.layoutData?.sitecore?.context.pageState;
+            if (process.env.NODE_ENV === 'development')
+                console.debug('Browser Events SDK is not initialized in development environment');
+            else if (pageState !== LayoutServicePageState.Normal)
+                console.debug('Browser Events SDK is not initialized in edit and preview modes');
+            else if (!eventsInitDone) {
+                CloudSDK({
+                    sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+                    siteName: props.site?.name || config.sitecoreSiteName,
+                    enableBrowserCookie: true,
+                })
+                    .addEvents()
+                    .initialize();
+            setEventsInitDone(true);
+            }
+        }, [props.site?.name]);
+    ```
+
+* Update `src/components/CDPPageView.tsx`:
+    * Remove the context import:
+    ```
+        import { context } from 'lib/context';
+    ```
+    * Add import for CloudSDK:
+    ```
+        import { pageView } from '@sitecore-cloudsdk/events/browser';
+    ```
+    * Replace the context promise code
+    ```
+        context
+        .getSDK('Events')
+        .then((Events) =>
+            Events.pageView({
+                channel: 'WEB',
+                currency: 'USD',
+                page: route.name,
+                pageVariantId,
+                language,
+            })
+        )
+        .catch((e) => console.debug(e));
+      ```
+      with a simplified `pageView` direct call:
+      ```
+        pageView({
+            channel: 'WEB',
+            currency: 'USD',
+            page: route.name,
+            pageVariantId,
+            language,
+        }).catch((e) => console.debug(e));
+      ```
+
+* Update src/byoc/index.ts to make sure Forms are functioning post-upgrade:
+    * Remove the context import:
+    ```
+        import { context } from 'lib/context';
+    ```
+    * Add imports for config and CloudSDK:
+    ```
+        import * as Events from '@sitecore-cloudsdk/events/browser';
+        import config from 'temp/config';
+    ```
+    * Replace the existing `FEAAS.setContextProperties()` call with:
+    ```
+        FEAAS.setContextProperties({
+            sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+            sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+            siteName: config.sitecoreSiteName,
+            eventsSDK: Events,
+        });
+    ``` 
+
+* If you have any other instances of using CloudSDK in your app, follow the CloudSDK 0.4.0 upgrade guide.
+
+* Remove any other `lib/context` import, if present. If you used `context.getSDK()` method, you can now use CloudSDK method calls directly. If `context` was used to retrieve other values, consider using `temp/config` instead.
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/package.json
@@ -1,7 +1,8 @@
 {
   "dependencies": {
-    "@sitecore/components": "^1.1.10",
-    "@sitecore-cloudsdk/events": "^0.3.1",
+    "@sitecore/components": "~2.0.0",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/events": "^0.4.0",
     "@sitecore-feaas/clientside": "^0.5.17"
   }
 }
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx
@@ -1,21 +1,34 @@
+import { useEffect, useState } from 'react';
 import { SitecorePageProps } from 'lib/page-props';
-import { context } from 'src/lib/context';
+import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+import '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
+import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';
 
 /**
  * The Bootstrap component is the entry point for performing any initialization logic
  * that needs to happen early in the application's lifecycle.
  */
 const Bootstrap = (props: SitecorePageProps): JSX.Element | null => {
-  /**
-   * Initializes the application Context and associated Software Development Kits (SDKs).
-   * This function is the entry point for setting up the application's context and any SDKs that are required for its proper functioning.
-   * It prepares the resources needed to interact with various services and features within the application.
-   */
-  context.init({
-    siteName: props.site?.name || config.sitecoreSiteName,
-    pageState: props.layoutData?.sitecore?.context?.pageState,
-  });
+  // Browser ClientSDK init allows for page view events to be tracked
+  const [eventsInitDone, setEventsInitDone] = useState(false);
+  useEffect(() => {
+    const pageState = props.layoutData?.sitecore?.context.pageState;
+    if (process.env.NODE_ENV === 'development')
+      console.debug('Browser Events SDK is not initialized in development environment');
+    else if (pageState !== LayoutServicePageState.Normal)
+      console.debug('Browser Events SDK is not initialized in edit and preview modes');
+    else if (!eventsInitDone) {
+      CloudSDK({
+        sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+        siteName: props.site?.name || config.sitecoreSiteName,
+        enableBrowserCookie: true,
+      })
+        .addEvents()
+        .initialize();
+      setEventsInitDone(true);
+    }
+  }, [props.site?.name]);
 
   return null;
 };

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/byoc/index.ts
@@ -1,15 +1,21 @@
 import * as FEAAS from '@sitecore-feaas/clientside/react';
+import * as Events from '@sitecore-cloudsdk/events/browser';
 import '@sitecore/components/context';
 import dynamic from 'next/dynamic';
-import { context } from 'lib/context';
+import config from 'temp/config';
 /**
  * This is an out-of-box bundler for External components (BYOC) (see Sitecore documentation for more details)
  * It enables registering components in client-only or SSR/hybrid contexts
  * It's recommended to not modify this file - please add BYOC imports in corresponding index.*.ts files instead
  */
 
 // Set context properties to be available within BYOC components
-FEAAS.setContextProperties(context);
+FEAAS.setContextProperties({
+  sitecoreEdgeUrl: config.sitecoreEdgeUrl,
+  sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+  siteName: config.sitecoreSiteName,
+  eventsSDK: Events,
+});
 
 // Import your client-only components via client-bundle. Nextjs's dynamic() call will ensure they are only rendered client-side
 const ClientBundle = dynamic(() => import('./index.client'), {

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/components/CdpPageView.tsx
@@ -4,8 +4,8 @@ import {
   useSitecoreContext,
 } from '@sitecore-jss/sitecore-jss-nextjs';
 import { useEffect } from 'react';
+import { pageView } from '@sitecore-cloudsdk/events/browser';
 import config from 'temp/config';
-import { context } from 'lib/context';
 
 /**
  * This is the CDP page view component.
@@ -46,19 +46,14 @@ const CdpPageView = (): JSX.Element => {
       variantId as string,
       scope
     );
-    // there are cases where Events SDK will be absent which are expected to reject
-    context
-      .getSDK('Events')
-      .then((Events) =>
-        Events.pageView({
-          channel: 'WEB',
-          currency: 'USD',
-          page: route.name,
-          pageVariantId,
-          language,
-        })
-      )
-      .catch((e) => console.debug(e));
+    // there can be cases where Events are not initialized which are expected to reject
+    pageView({
+      channel: 'WEB',
+      currency: 'USD',
+      page: route.name,
+      pageVariantId,
+      language,
+    }).catch((e) => console.debug(e));
   }, [pageState, route, variantId, site]);
 
   return <></>;

diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/index.ts
diff --git a/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts b/packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/lib/context/sdk/events.ts
diff --git a/packages/sitecore-jss-nextjs/context.d.ts b/packages/sitecore-jss-nextjs/context.d.ts
diff --git a/packages/sitecore-jss-nextjs/context.js b/packages/sitecore-jss-nextjs/context.js
diff --git a/packages/sitecore-jss-nextjs/package.json b/packages/sitecore-jss-nextjs/package.json
@@ -29,7 +29,8 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@sitecore-cloudsdk/personalize": "^0.3.1",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/personalize": "^0.4.0",
     "@types/chai": "^4.3.4",
     "@types/chai-as-promised": "^7.1.5",
     "@types/chai-string": "^1.4.2",
@@ -65,8 +66,8 @@
     "typescript": "~4.9.4"
   },
   "peerDependencies": {
-    "@sitecore-cloudsdk/events": "^0.3.1",
-    "@sitecore-cloudsdk/personalize": "^0.3.1",
+    "@sitecore-cloudsdk/core": "^0.4.0",
+    "@sitecore-cloudsdk/personalize": "^0.4.0",
     "next": "^14.2.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"