---
title: "Upgrade JSS 22.1 Next.js apps to version 22.2"
slug: "upgrade-jss-22-1-next-js-apps-to-version-22-2"
abstract: "How to upgrade your JavaScript Rendering SDKs to version 22.2 to make use of the latest version of the Cloud SDK."
---
# Upgrade JSS 22.1 Next.js apps to version 22.2

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:

> [!note]
> **XM Cloud is now SitecoreAI**
> Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

- `nextjs` 
- `nextjs-xmcloud` 
- `nextjs-sxa` 
- `nextjs-multisite` 

> [!note]
> **Before you begin**
> -   If you haven't already done so, [upgrade your app to JSS 22.1](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-0-0-next-js-apps-to-version-22-1.html "Upgrade JSS 22.0.0 Next.js apps to version 22.1").
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/releases/tag/v22.2.0). 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:

:::walkthrough
1. [Update application dependencies in your existing app](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-1-next-js-apps-to-version-22-2.html#update-application-dependencies-in-your-existing-app)
2. [Create a JSS 22.2 Next.js application](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-1-next-js-apps-to-version-22-2.html#create-a-jss-222-nextjs-application)
3. [Update the Next.js template files in your existing app](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-1-next-js-apps-to-version-22-2.html#update-the-nextjs-template-files-in-your-existing-app)
:::

## Update application dependencies in your existing app

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

To update your dependencies:

1. 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`.
2. Install the dependencies with the following command:

    ```shell
    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:

1. In a console, run the following command:

    ```shell
    npx create-sitecore-jss@22.2 nextjs
    ```

2. If prompted to install the `create-sitecore-jss@22.2` package, answer *y*.
3. 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.
4. Follow the remaining prompts, selecting the same options for data fetching (`GraphQL` or `REST`) and prerendering (`SSG` or `SSR`) as in your existing application.
5. When asked if you are building for Sitecore XM Cloud, answer *y* to install the XM Cloud add-on.
6. Select other add-ons used by your existing application and press Enter.

The script then installs the application dependencies.

> [!note]
> **XM Cloud is now SitecoreAI**
> Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

## 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:

1. Delete the `src/lib/context/` folder.
2. 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:

        ```ts
        import { context } from 'src/lib/context';
        ```

    - Add the following import statements:

        ```ts
        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:

        ```ts
        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:

        ```ts
        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]);
        ```

3. 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:

        ```ts
        import { context } from 'lib/context';
        ```

    - Add the following import statement:

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

    - Locate the context promise, such as:

        ```ts
        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:

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

4. 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:

        ```ts
        import { context } from 'lib/context';
        ```

    - Add the following import statements:

        ```ts
        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:

        ```ts
        FEAAS.setContextProperties(context);
        ```

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

        ```ts
        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:

        ```ts
        export default BYOCInit;
        ```

5. 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.
6. If your app contains any other references to the Cloud SDK, update them using the [Cloud SDK upgrade guide](https://doc.sitecore.com/sdk/en/developers/005/cloud-sdk/upgrade-from-cloud-sdk-version-0-3-to-0-4.html).

## Next steps

To finalize the upgrade process, make sure you resolve any errors and warnings you encounter. [Enable debug logging for JSS specific issues](https://doc.sitecore.com/sai/en/developers/jss/217/jss-sai/debug-logging-in-jss-apps.html) to assist you if necessary.