Upgrade JSS 22.7 Next.js apps to version 22.8

Version:

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

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.7.
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.8.0.
- Update every @sitecore-feaas/clientside package to version ^0.6.0.
- Update every @sitecore/components package to version ~2.1.0.
Install the dependencies with the following command:
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:

Modify src/lib/page-props-factory/plugins/preview-mode.ts:

Update the @sitecore-jss/sitecore-jss-nextjs/editing import statement to include isDesignLibraryPreviewData:

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

Add the following import statements:

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

Find the following line:

if (!context.preview) return props;

Immediately after it, paste this code block:

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

Modify /src/Bootstrap.tsx:
- Add RenderingType to the @sitecore-jss/sitecore-jss-nextjs import statement, as shown in the following example:
  import { LayoutServicePageState, RenderingType } from '@sitecore-jss/sitecore-jss-nextjs';
- After the pageState constant declaration, add the following:
  const renderingType = props.layoutData?.sitecore?.context.renderingType;
- Modify the pageState condition to include a renderingType check as shown in the following example:
  else if (pageState !== LayoutServicePageState.Normal || renderingType === RenderingType.Component)

Modify src/lib/page-props-factory/plugins/component-themes.ts.

Add the following import statement:

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

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

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

Modify src/Layout.tsx:

Edit the @sitecore-jss/sitecore-jss-nextjs import statement and add DesignLibrary and RenderingType:

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

Paste the following code block after the constant declarations.

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:
<div className={mainClassPageEditing}>

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

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

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

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

If you have suggestions for improving this article, let us know!