---
title: "Upgrade JSS 22.7 Next.js apps to version 22.8"
slug: "upgrade-jss-22-7-next-js-apps-to-version-22-8"
abstract: "How to upgrade your JSS 22.7 Next.js apps to version 22.8 to benefit from the latest features including the Design Library for early access users."
---
# Upgrade JSS 22.7 Next.js apps to version 22.8

JSS SDK 22.8 includes support for the Design Library for early access users. The Design library is a centralized interface designed to help teams visualize and test components across their organization. This topic covers most of the changes you must make to your existing JSS 22.7 applications to take advantage of the new features in version 22.8. 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.7 application included in the XM Cloud starter foundation uses the following templates and add-ons:

- `nextjs`
- `nextjs-styleguide`
- `nextjs-sxa`
- `nextjs-multisite`

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

> [!note]
> **Before you begin**
> -   If you haven't already done so, [upgrade your app to JSS 22.7](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-6-next-js-apps-to-version-22-7.html "Upgrade JSS 22.6 Next.js apps to version 22.7").
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/releases/tag/v22.8.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-7-next-js-apps-to-version-22-8.html#update-application-dependencies-in-your-existing-app)
2. [Update the Next.js template files in your existing app](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-7-next-js-apps-to-version-22-8.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.8.0`.
    - Update every `@sitecore-feaas/clientside` package to version `^0.6.0`.
    - Update every `@sitecore/components` package to version `~2.1.0`.
2. Install the dependencies with the following command:

    ```text
    npm install
    ```

## Update the Next.js template files in your existing app

After updating your dependencies, you must synchronize files in your existing application.

To update the Next.js template files:

1. Modify `src/lib/page-props-factory/plugins/preview-mode.ts`:
    - Update the `@sitecore-jss/sitecore-jss-nextjs/editing` import statement to include `isDesignLibraryPreviewData`:

        ```ts
        import {
          ...
          isDesignLibraryPreviewData,
        } from '@sitecore-jss/sitecore-jss-nextjs/editing';
        ```

    - Add the following import statements:

        ```ts
        import { RestComponentLayoutService } from '@sitecore-jss/sitecore-jss-nextjs';
        import config from 'temp/config';
        ```

    - Find the following line:

        ```ts
        if (!context.preview) return props;
        ```

        Immediately after it, paste this code block:

        ```ts
        if (isDesignLibraryPreviewData(context.previewData)) {
          const {
            itemId,
            componentUid,
            site,
            language,
            renderingId,
            dataSourceId,
            version,
            mode,
          } = context.previewData;

          const componentService = new RestComponentLayoutService({
            sitecoreEdgeContextId: config.sitecoreEdgeContextId,
            sitecoreEdgeUrl: config.sitecoreEdgeUrl,
          });

          const componentData = await componentService.fetchComponentData({
            siteName: site,
            itemId,
            language,
            componentUid,
            renderingId,
            dataSourceId,
            version,
            mode,
          });

          if (!componentData) {
            throw new Error(
              `Unable to fetch editing data for preview ${JSON.stringify(
                context.previewData
              )}`
            );
          }

          // we can reuse editing service, fortunately
          const dictionaryData = await graphQLEditingService.fetchDictionaryData({
            siteName: site,
            language,
          });

          props.locale = context.previewData.language;
          props.layoutData = componentData;
          props.headLinks = [];
          props.dictionary = dictionaryData;

          return props;
        }
        ```

2. Modify `/src/Bootstrap.tsx`:
    - Add `RenderingType` to the `@sitecore-jss/sitecore-jss-nextjs` import statement, as shown in the following example:

        ```ts
        import { LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss-nextjs';
        ```

    - After the `pageState` constant declaration, add the following:

        ```ts
        const renderingType = props.layoutData?.sitecore?.context.renderingType;
        ```

    - Modify the `pageState` condition to include a `renderingType` check as shown in the following example:

        ```ts
        else if (pageState !== LayoutServicePageState.Normal || renderingType === RenderingType.Component)
        ```

3. Modify `src/lib/page-props-factory/plugins/component-themes.ts`.
    - Add the following import statement:

        ```ts
        import { getDesignLibraryStylesheetLinks } from '@sitecore-jss/sitecore-jss-nextjs';
        ```

    - Update the `exec` function to use `getDesignLibraryStylesheetLinks` instead of `getComponentLibraryStylesheetLinks`, as shown in the following example:

        ```csharp
        async exec(props: SitecorePageProps) {
            ...
            props.headLinks.push(
              ...getDesignLibraryStylesheetLinks(
                props.layoutData,
                config.sitecoreEdgeContextId,
                config.sitecoreEdgeUrl
              )
            ...

        }
        ```

4. Modify `src/Layout.tsx`:
    - Edit the `@sitecore-jss/sitecore-jss-nextjs` import statement and add `DesignLibrary` and `RenderingType`:

        ```ts
        import {
          ...
          DesignLibrary,
          RenderingType,
        } from '@sitecore-jss/sitecore-jss-nextjs';
        ```

    - Paste the following code block after the constant declarations.

        ```ts
        const renderContent = () => (
          <>
            <header>
              <div id="header">
                {route && <Placeholder name="headless-header" rendering={route} />}
              </div>
            </header>
            <main>
              <div id="content">
                {route && <Placeholder name="headless-main" rendering={route} />}
              </div>
            </main>
            <footer>
              <div id="footer">
                {route && <Placeholder name="headless-footer" rendering={route} />}
              </div>
            </footer>
          </>
        );
        ```

    - Find the following `div`:

        ```ts
        <div className={mainClassPageEditing}>
        ```

    - Replace the existing contents of the `div` with the following line:

        ```ts
        {layoutData.sitecore.context.renderingType === RenderingType.Component ? (
            <DesignLibrary {...layoutData} />
          ) : (
            renderContent()
        )}
        ```

5. Modify `SitecoreContext` in `src/pages/404.tsx` and `src/pages/500.tsx` to include `api` settings:

    ```csharp
    <SitecoreContext
      ...
      api={{
        edge: {
          contextId: config.sitecoreEdgeContextId,
          edgeUrl: config.sitecoreEdgeUrl,
        },
      }}
    >
    ```

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