---
title: "Upgrade JSS 22.9 Next.js apps to version 22.10"
slug: "upgrade-jss-22-9-next-js-apps-to-version-22-10"
abstract: "How to upgrade your JSS 22.9 Next.js apps to version 22.10."
---
# Upgrade JSS 22.9 Next.js apps to version 22.10

This topic covers most of the changes you must make to your existing JSS 22.9 applications to take advantage of the new features in version 22.10. 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.

> [!note]
> JSS 22.10 primarily focuses on support for Angular 20. For Next.js, the only requirement is to update dependencies before re-testing your apps.

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.9 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.9](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-8-next-js-apps-to-version-22-9.html).
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/blob/v22.10.0/CHANGELOG.md#22100). If your application is heavily customized, the changelog can provide guidance on what additional changes you need that are not covered in this topic.

## 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` update every `@sitecore-jss` package to version `~22.10.0`.
2. Install the dependencies with the following command:

    ```shell
    npm install
    ```

## Enable component-level data fetching for error pages in JSS Next.js apps

Error pages (such as `404.tsx` and `500.tsx`) now support component-level data fetching in the Next.js starter template. This is an optional step that allows error pages to fetch and render component-specific data like regular pages.

By enabling component-level data fetching, components on error pages fetch their own data using the same mechanisms as components on standard pages, instead of relying on static content.

To enable component-level data fetching for error pages in your JSS Next.js apps:

1. From the `page-props-factory/component-props.ts` plugin file, move the component-level data fetching logic from the `exec()` function into a shared location (for example, `lib/component-props/index.ts`). The new `index.ts` file should contain the following:

    ```ts
    /**
     * Fetch component props for a given layout data and context
     * @param {LayoutServiceData} layoutData - The layout data to fetch component props for
     * @param {GetServerSidePropsContext | GetStaticPropsContext} context - The context to fetch component props for
     * @returns {ComponentPropsCollection} The component props
     * @throws {Error} If there are errors during component props fetching
     */
    export async function fetchComponentProps(
      layoutData: LayoutServiceData,
      context: GetServerSidePropsContext | GetStaticPropsContext
    ): Promise<ComponentPropsCollection> {
      const service = new ComponentPropsService();

      const componentProps = isServerSidePropsContext(context)
        ? await service.fetchServerSideComponentProps({ layoutData, context, moduleFactory })
        : await service.fetchStaticComponentProps({ layoutData, context, moduleFactory });

      const errors = Object.keys(componentProps)
        .map(id => {
          const c = componentProps[id] as ComponentPropsError;
          return c?.error
            ? `\nUnable to get component props for ${c.componentName} (${id}): ${c.error}`
            : '';
        })
        .join('');

      if (errors.length) {
        throw new Error(errors);
      }

      return componentProps;
    }
    ```

2. In the `page-props-factory/component-props.ts` plugin file, replace the inline fetching logic from the `exec()` function with a call to `fetchComponentProps` as shown:

    ```ts
    props.componentProps = await fetchComponentProps(props.layoutData, context);
    ```

3. In your error page component:
    - Add an import for `ComponentPropsContext`:

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

    - Wrap the component with `ComponentPropsContext` and pass `componentProps` as shown:

        ```ts
        import { ComponentPropsContext } from '@sitecore-jss/sitecore-jss-nextjs';
        import { SitecorePageProps } from 'lib/page-props';
        ...
        const Custom404 = (props: SitecorePageProps): JSX.Element => {
          return (
            <ComponentPropsContext value={props.componentProps}>
              ...
            </ComponentPropsContext>
          );
        };
        ```

    - Fetch component props in the `getStaticProps` or `getServerSideProps` function of your error pages using the following:

        ```csharp
        const layoutData = resultErrorPages?.notFoundPage?.rendered || null;

        let componentProps = {};

        if (layoutData?.sitecore?.route) {
          componentProps = await fetchComponentProps(layoutData, context);
        }
        ```

    - Modify the return statement:

        ```csharp
        return {
          props: {
            headLinks: [],
            layoutData,
            componentProps,
          },
        };
        ```

## Next steps

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