---
title: "Upgrade JSS 22.5 Next.js apps to version 22.6"
slug: "upgrade-jss-22-5-next-js-apps-to-version-22-6"
abstract: "How to upgrade your JSS 22.5 Next.js apps to version 22.6 to use the new Form wrapper component."
---
# Upgrade JSS 22.5 Next.js apps to version 22.6

22.6 introduces a new `Form` component that is imported as part of the `sitecore-jss-react` package. This is now used by JSS Next.js apps instead of the previous wrapper component when adding forms in the page builder. After upgrading your app, we strongly recommend [manually modifying the layout details](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-5-next-js-apps-to-version-22-6.html#UUID-3dfac09a-46cf-cb4e-7e79-956d1bef1cfe_section-idm234930831878318 "Update existing forms to use the new wrapper") of your existing forms to use the new wrapper.

This topic covers most of the changes you must make to your existing JSS 22.5 applications to take advantage of the improvements in version 22.6. 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.5 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.5](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-4-next-js-apps-to-version-22-5.html "Upgrade JSS 22.4 Next.js apps to version 22.5").
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/releases/tag/v22.6.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-5-next-js-apps-to-version-22-6.html#update-application-dependencies-in-your-existing-app)
2. [Create a JSS 22.6 Next.js application](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-5-next-js-apps-to-version-22-6.html#create-a-jss-226-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-5-next-js-apps-to-version-22-6.html#update-the-nextjs-template-files-in-your-existing-app)
4. [Update existing forms to use the new wrapper](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-5-next-js-apps-to-version-22-6.html#update-existing-forms-to-use-the-new-wrapper)
:::

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

    ```shell
    npm install
    ```

## Create a JSS 22.6 Next.js application

To simplify the upgrade process as much as possible, create a JSS 22.6 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.6 Next.js application with the XM Cloud add-on included:

1. In a console, run the following command:

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

2. If prompted to install the `create-sitecore-jss@22.6` package, answer *y*.
3. Enter the folder path for the JSS 22.6 Next.js app. For example, enter `*./jss226*`, 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.6 app.

To update the Next.js template files:

1. Copy the `/scripts/generate-component-builder/plugins/form.ts` file from your template app to the same location in your existing app.
2. In `/src/pages/[[...path]].tsx` and every other file in your app that uses `SitecoreContext`, import the `config` and then modify `SitecoreContext` to include the `api` parameter (which is used by the new `Form` component to pass Edge endpoint settings), as shown in the following example:

    ```ts
    import config from 'temp/config';
    ...
    <SitecoreContext
      ...
      api={{
        edge: {
          contextId: config.sitecoreEdgeContextId,
          edgeUrl: config.sitecoreEdgeUrl,
        },
      }}
    >
    ```

    > [!tip]
    > For any such file that you haven't previously made modifications to, you can just replace that file with a copy of the one in your template app.

3. If you have not customized the `/src/pages/api/sitemap.ts` file, replace it with the version from your 22.6 template app. Otherwise, modify your file as follows:
    - Delete all of the following lines:

        ```ts
        import config from 'temp/config';
        ...
        const ABSOLUTE_URL_REGEXP = '^(?:[a-z]+:)?//';
        ...
            const isAbsoluteUrl = sitemapPath.match(ABSOLUTE_URL_REGEXP);
            const sitemapUrl = isAbsoluteUrl ? sitemapPath : `${config.sitecoreApiHost}${sitemapPath}`;
            res.setHeader('Content-Type', 'text/xml;charset=utf-8');
        ...
        ```

    - Locate the following statement:

        ```ts
        const xmlResponse = await fetcher.fetch<string>(sitemapUrl);
        ```

        Replace it with all of the following:

        ```ts
        const xmlResponse = await fetcher.fetch<string>(sitemapPath);

        if (!xmlResponse.data) {
          return res.redirect('/404');
        }

        res.setHeader('Content-Type', 'text/xml;charset=utf-8');
        ```

    - Locate the following statement:

        ```ts
        const reqtHost = req.headers.host;
        ```

        In it, rename `reqtHost` to `reqHost`. For example:

        ```ts
        const reqHost = req.headers.host;
        ```

    - In the `sitemaps.map` declaration, add the `escapedUrl` constant as shown in the following example:

        ```ts
        const SitemapLinks = sitemaps
          .map((item: string) => {
            ...
            const escapedUrl = `${reqProtocol}://${reqHost}/${lastSegment}`.replace(/&/g, '&amp;');
            ...
        ```

    - In the sitemap return statement, locate the following:

        ```ts
        <loc>${reqProtocol}://${reqtHost}/${lastSegment}</loc>
        ```

        Amend it to use the newly defined `escapedUrl`. For example:

        ```ts
        <loc>${escapedUrl}</loc>
        ```

    - Locate the following return statement:

        ```ts
        return res.send(`
          ...
        `);
        ```

        Amend it to add the following XML declaration:

        ```ts
        return res.send(`<?xml version="1.0">
          ...
        `);
        ```

## Update existing forms to use the new wrapper

After you upgrade your JSS app and redeploy it to SitecoreAI, new forms will use the updated wrapper component. However, we strongly recommend you update the presentation details of existing forms on your pages to use the new wrapper.

> [!tip]
> If you prefer, you can use the page builder to delete the existing forms and add them again. As new form components, they will automatically use the new wrapper component provided by JSS 22.6.

To update an existing form to use the new wrapper:

1. In Content Editor, select the page containing the existing form.
2. In the ribbon, click **Presentation > Details**.
3. In the details dialog, in the **Final Layout** tab, click the **Edit** link under the **Headless Layout** section.
4. In the **Controls** tab, select the **BYOC Wrapper** control you want update and click **Change**.
5. In the file browser dialog, select **Feature > Headless Experience Accelerator > Forms > Form** and click **Select**.

    This closes the dialog, converting the selected control to use the new wrapper. The converted control will remain selected for the next step.

6. Click **Edit**.
7. In the **Control Properties** dialog, in the **Parameters** section, copy the `formId` from the **Component Name** parameter and paste it into the **FormId** field at the top of the dialog.

    > [!important]
    > Only copy the value that follows `?formId=`.

8. Delete all items in the **Parameters** section.
9. Click **OK**.
10. Repeat this process for all other forms in your site.
11. When all of your forms have been updated to use the new wrapper, remove the following form registration from `/src/byoc/index.client.tsx` in your JSS app and redeploy it:

    ```ts
    // SitecoreForm component displays forms created in XM Forms as individual components to be embedded into Pages.
    // Sitecore Forms for Sitecore XP are still available separately via @sitecore-jss-forms package
    import '@sitecore/components/form';
    ```

    > [!warning]
    > Removing this import will cause any forms that still use the old wrapper to stop working.

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