Upgrade JSS 22.1 Next.js apps to version 22.2

Version: 22.x

This topic covers most of the changes you must make to your existing JSS 22.1 applications to take advantage of the new features in version 22.2, which primarily relate to integration with version 0.4 of the Cloud SDK. However, because of the nature of JavaScript and Next.js application development, this topic doesn't account for all the customization you might have in your existing application.

While upgrading, consider the JSS templates and add-ons you used when creating your Next.js application. You can find them in your package.json file. For example, a JSS 22.1 application included in the XM Cloud starter foundation uses the following templates and add-ons:

nextjs
nextjs-xmcloud
nextjs-sxa
nextjs-multisite

Before you begin

If you haven't already done so, upgrade your app to JSS 22.1.
Familiarize yourself with the changelog. If your application is heavily customized, the changelog can provide guidance on what additional changes you need that are not covered in this topic.

This topic describes how to:

Update application dependencies in your existing app

For your upgraded application to work correctly, you will need to update dependencies.

To update your dependencies:

In your existing application's package.json file:
- Update every @sitecore-jss package to version ~22.2.0.
- Update the @sitecore/components package to version ~2.0.0.
- Add the @sitecore-cloudsdk/core package at version ^0.4.0.
- Update the @sitecore-cloudsdk/events package to version ^0.4.0.
Install the dependencies with the following command:
RequestResponse
```
npm install
```

Create a JSS 22.2 Next.js application

To simplify the upgrade process as much as possible, create a JSS 22.2 Next.js application with the XM Cloud add-on. You can then copy some files from this app into your existing app.

To create a JSS 22.2 Next.js application with the XM Cloud add-on included:

In a console, run the following command:
RequestResponse
```
npx [email protected] nextjs
```
If prompted to install the [email protected] package, answer y.
Enter the folder path for the JSS 22.2 Next.js app. For example, enter ./jss222, to create the app folder in your current working directory.
Follow the remaining prompts, selecting the same options for data fetching (GraphQL or REST) and prerendering (SSG or SSR) as in your existing application.
When asked if you are building for Sitecore XM Cloud, answer y to install the XM Cloud add-on.
Select other add-ons used by your existing application and press Enter.

The script then installs the application dependencies.

Update the Next.js template files in your existing app

This explains how to synchronize files in your existing application with corresponding files from your new JSS 22.2 app.

To update the Next.js template files:

Delete the src/lib/context/ folder.

If you have not customized the src/Bootstrap.tsx file, replace it with the 22.2 version. Otherwise, modify your file as follows:

Delete the following import statement:
RequestResponse
```
import { context } from 'src/lib/context';
```

Add the following import statements:

RequestResponse

import { useEffect } from 'react';
import { CloudSDK } from '@sitecore-cloudsdk/core/browser';
import '@sitecore-cloudsdk/events/browser';
import { LayoutServicePageState } from '@sitecore-jss/sitecore-jss-nextjs';

Locate the following call:

RequestResponse

context.init({
  siteName: props.site?.name || config.sitecoreSiteName,
  pageState: props.layoutData?.sitecore?.context?.pageState,
});

Replace it with the following, which is performed within useEffect and only takes effect in normal (not developer) mode:

RequestResponse

useEffect(() => {
    const pageState = props.layoutData?.sitecore?.context.pageState;
  
    if (process.env.NODE_ENV === 'development') {
      console.debug('Browser Events SDK is not initialized in development environments');
    } else if (pageState !== LayoutServicePageState.Normal) {
      console.debug('Browser Events SDK is not initialized in edit and preview modes');
    } else {
      CloudSDK({
        sitecoreEdgeUrl: config.sitecoreEdgeUrl,
        sitecoreEdgeContextId: config.sitecoreEdgeContextId,
        siteName: props.site?.name || config.sitecoreSiteName,
        enableBrowserCookie: true,
        // Replace with the top level cookie domain of the website being integrated, e.g. ".example.com" and not "www.example.com"
        cookieDomain: window.location.hostname.replace(/^www\./, ''),
      })
      .addEvents()
      .initialize();
    }
  }, [props.site?.name]);

If you have not customized the src/components/CDPPageView.tsx file, replace it with the 22.2 version. Otherwise, modify your file as follows:

Delete the following import statement:
RequestResponse
```
import { context } from 'lib/context';
```

Add the following import statement:

RequestResponse

import { pageView } from '@sitecore-cloudsdk/events/browser';

Locate the context promise, such as:

RequestResponse

context
  .getSDK('Events')
  .then((Events) =>
    Events.pageView({
      channel: 'WEB',
      currency: 'USD',
      page: route.name,
      pageVariantId,
      language,
    })
  )
.catch((e) => console.debug(e));

Replace it with a simplified version similar to the following, using your own properties for pageView, such as:

RequestResponse

pageView({
  channel: 'WEB',
  currency: 'USD',
  page: route.name,
  pageVariantId,
  language,
}).catch((e) => console.debug(e));

If you have not customized the src/byoc/index.ts file, replace it with the 22.2 version (which is named index.tsx) and delete the old file. Otherwise, modify your file as follows:

Rename the file to index.tsx.
Delete the following import statement:
RequestResponse
```
import { context } from 'lib/context';
```

Add the following import statements:

RequestResponse

import React from 'react';
import * as Events from '@sitecore-cloudsdk/events/browser';
import config from 'temp/config';
import {
  LayoutServicePageState,
  SitecoreContextReactContext,
} from '@sitecore-jss/sitecore-jss-nextjs';

Locate the existing FEAAS.setContextProperties call, such as:
RequestResponse
```
FEAAS.setContextProperties(context);
```

Replace it with the following, which contains a new version of that call:

RequestResponse

const BYOCInit = (): JSX.Element | null => {
  const sitecoreContext = React.useContext(SitecoreContextReactContext).context;
  // Set context properties to be available within BYOC components
  FEAAS.setContextProperties({
    sitecoreEdgeUrl: config.sitecoreEdgeUrl,
    sitecoreEdgeContextId: config.sitecoreEdgeContextId,
    pageState: sitecoreContext?.pageState || LayoutServicePageState.Normal,
    siteName: sitecoreContext?.site?.name || config.sitecoreSiteName,
    eventsSDK: Events,
  });
  return <FEAAS.ExternalComponentBundle />;
};

Replace the existing export statement at the end of the file with the following:
RequestResponse
```
export default BYOCInit;
```

Search for any other 'lib/context' imports throughout your code and delete them. If your app used the context.getSDK() method, you can now use CloudSDK method calls directly. If your app currently uses context to retrieve other values, we recommend using temp/config instead.
If your app contains any other references to the Cloud SDK, update them using the Cloud SDK upgrade guide.

Next steps

To finalize the upgrade process, make sure you resolve any errors and warnings you encounter. Enable debug logging for JSS specific issues to assist you if necessary.

Do you have some feedback for us?

If you have suggestions for improving this article,