[nextjs] Update Cloudsdk to v0.4

CHANGELOG.md

@@ -89,6 +89,13 @@ 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)) 
+
 ## 22.1.4
 
 ### 🐛 Bug Fixes

docs/upgrades/unreleased.md

@@ -382,3 +382,102 @@ If you plan to use the Angular SDK with XMCloud, you will need to perform next s
 * `express` dependency is marked as a peer dependency, so you need to match the required version "^4.19.2".
 
 * Copy the `.gitignore` file from fresh latest version proxy app into your existing proxy app, if not already present.
+
+# 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 for CloudSDK:
+    ```
+        import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
+        import '@sitecore-cloudsdk/events/browser';
+    ```
+    * 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()`:
+    ```
+        useEffect(() => {
+            CloudSDK({
+                sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+                siteName: props.site?.name || config.sitecoreSiteName,
+                enableBrowserCookie: true,
+            })
+            .addEvents()
+            .initialize();
+        }, [props.site]);
+    ```
+
+* 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.

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"
   }
 }

packages/create-sitecore-jss/src/templates/nextjs-xmcloud/src/Bootstrap.tsx

@@ -1,21 +1,24 @@
+import { useEffect } 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';
 
 /**
  * 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
+  useEffect(() => {
+    CloudSDK({
+      sitecoreEdgeContextId: config.sitecoreEdgeContextId,
+      siteName: props.site?.name || config.sitecoreSiteName,
+      enableBrowserCookie: true,
+    })
+      .addEvents()
+      .initialize();
+  }, [props.site]);
 
   return null;
 };

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'), {

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 <></>;

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"