Upgrade JSS 22.9 Next.js apps to version 22.10

Version: 22.x

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 or nextjs-sxa
nextjs-multisite

XM Cloud is now SitecoreAI

Some code examples, images, and UI labels may still use XM Cloud while engineering assets are being updated.

Before you begin

If you haven't already done so, upgrade your app to JSS 22.9.
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.

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

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:

RequestResponse

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

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:
RequestResponse
```
props.componentProps = await fetchComponentProps(props.layoutData, context);
```

In your error page component:

Add an import for ComponentPropsContext:

RequestResponse

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

Wrap the component with ComponentPropsContext and pass componentProps as shown:

RequestResponse

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:

RequestResponse

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

let componentProps = {};

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

Modify the return statement:

RequestResponse

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 specific issues to assist you if necessary.

Do you have some feedback for us?

If you have suggestions for improving this article,