---
title: "Upgrade your JSS 22.9/22.10 Next.js apps to Content SDK 1.3.1"
slug: "upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1"
abstract: "How to upgrade your JSS 22.9/22.10 Next.js apps to Content SDK 1.3.1."
---
# Upgrade your JSS 22.9/22.10 Next.js apps to Content SDK 1.3.1

Content SDK is a major upgrade from previous versions of Sitecore JavaScript Services SDK (JSS) for SitecoreAI. It reduces the size and complexity of starter applications, removing redundant functionality not needed for SitecoreAI implementations. As a result, Content SDK applications are easier to understand and maintain than apps built with JSS.

This guide summarizes the differences between Content SDK and JSS. It also explains how to upgrade your existing JSS apps for SitecoreAI.

This guide also covers most of the changes you must make to your existing JSS 22.9/22.10 applications to take advantage of the new features in Content SDK 1.3.1. Content SDK 1.3.1 includes the general release of Next.js App Router and several other improvements and bug fixes. Note that version 1.3.0 was released and deprecated due to a critical vulnerability related to React Server Components.

Due to the nature of JavaScript and Next.js application development, this guide 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 JSS application. You can find them in your `package.json` file. For example, a JSS 22.9/22.10 application based on the XM Cloud starter kit uses the following templates and add-ons, so this guide assumes your app includes all of them:

- `nextjs`
- `nextjs-xmcloud`
- `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.

> [!important]
> **Before you begin**
> -   If you haven't already done so, [upgrade your JSS 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) or [JSS 22.10](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-9-next-js-apps-to-version-22-10.html).
>
> -   Review the changelogs for [1.3.0](https://github.com/Sitecore/content-sdk/blob/dev/CHANGELOG.md#130) and [1.3.1](https://github.com/Sitecore/content-sdk/blob/dev/CHANGELOG.md#131). If your application is heavily customized, the changelog can provide guidance on what additional changes you need that are not covered in this topic.
>
> -   If you want to start using Content SDK 1.3.1 App Router, follow this guide first and then [upgrade to 1.3.1 App Router](https://doc.sitecore.com/sai/en/developers/content-sdk/10/migrate-your-content-sdk-1-3-1-pages-router-app-to-app-router.html "Migrate your Content SDK 1.3.1 Pages Router app to App Router").

This topic covers the following subjects:

1. [What's new in Content SDK?](https://doc.sitecore.com/sai/en/developers/content-sdk/10/upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1.html#UUID-9d9b17a5-8053-af00-2bb2-e8be830e2001_section-idm235044658185867 "What's new in Content SDK?")
2. [Removal of Experience Editor](https://doc.sitecore.com/sai/en/developers/content-sdk/10/upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1.html#UUID-9d9b17a5-8053-af00-2bb2-e8be830e2001_section-idm235044660042482 "Removal of Experience Editor")
3. [Update application dependencies in your existing JSS app](https://doc.sitecore.com/sai/en/developers/content-sdk/10/upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1.html#UUID-9d9b17a5-8053-af00-2bb2-e8be830e2001_section-idm235044710812966 "Update application dependencies in your existing JSS app")
4. [Create a template Content SDK 1.3.1 application](https://doc.sitecore.com/sai/en/developers/content-sdk/10/upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1.html#UUID-9d9b17a5-8053-af00-2bb2-e8be830e2001_section-idm235044712680854 "Create a template Content SDK 1.3.1 application")
5. [Update the Next.js template files in your existing app](https://doc.sitecore.com/sai/en/developers/content-sdk/10/upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1.html#UUID-9d9b17a5-8053-af00-2bb2-e8be830e2001_section-idm235044715604958 "Update the Next.js template files in your existing app")
6. [Obsolete and revised functionality in your existing app](https://doc.sitecore.com/sai/en/developers/content-sdk/10/upgrade-your-jss-22-9-22-10-next-js-apps-to-content-sdk-1-3-1.html#UUID-9d9b17a5-8053-af00-2bb2-e8be830e2001_section-idm235044774141422 "Obsolete and revised functionality in your existing app")

## What's new in Content SDK?

Here's a short overview of the changes introduced in Content SDK:

- Includes out-of-the-box support for the Design studio that serves as a centralized interface to help teams visualize and test components across their organization.
- Three brand new site templates in addition to the classic Skatepark template.
- A new file, `sitecore.config.ts`, serves as the central point for configuring your application's build and run time.
- Another new file, `sitecore.cli.config.ts`, used to configure CLI commands for Content SDK that enable it to replace build-time and dev tools scripts.
- The new Sitecore Client Data Fetching API, represented by the `SitecoreClient` class, unifies all data fetching logic and replaces the previous data fetching plugins.
- A new utility named `defineMiddleware`, simplifies middleware composition and provides better visibility by removing the need for middleware plugins.
- Supports the enhanced SitecoreAI page builder in place of the Sitecore Experience Editor.

## Removal of Experience Editor

Unlike JSS for SitecoreAI, Content SDK doesn't support the Experience Editor tool and, for that reason, doesn't include the chromes-based integration required by Experience Editor. Instead, all visual editing with Content SDK is done with the SitecoreAI page builder using metadata integration.

> [!important]
> When migrating to Content SDK, Content Editor Preview is not supported. Content SDK removes all Experience Editor–based rendering and preview capabilities, including preview functionality accessed from the Content Editor. Preview and editing are supported only through Page Builder.

The following packages have been updated for Content SDK in relation to removal of Experience Editor support. Familiarize yourself with the updates and note any breaking changes this might introduce to your application so you can address them during the upgrade process:

::::tabs
:::tab{title="sitecore-jss"}
{ .notintoc }

- Removed the `HtmlElementRendering` interface, meaning only `ComponentRendering` interface is now used.
- `field.editable` is no longer available. Instead, `field.metadata` is used for edit mode.
- Removed the `EditMode.Chromes` enum value.
- `LayoutServiceContext` no longer exposes `editMode`.
- Renamed the `HorizonEditor` utility class to `PagesEditor`.
- Removed the `ExperienceEditor` utility class.
- Removed the `handleEditorAnchors` utility.
- Removed all `EditFrame` utilities, including:
    - `DefaultEditFrameButton`
    - `DefaultEditFrameButtons`
    - `DefaultEditFrameButtonIds`
    - `EditFrameDataSource`
    - `ChromeCommand`
    - `FieldEditButton`
    - `WebEditButton`
    - `EditButtonTypes`
    - `mapButtonToCommand`

:::
:::tab{title="sitecore-jss-react"}
{ .notintoc }

- Removed Chromes mode support.
- Removed the `HtmlElementRendering` interface.
- Removed the `EditFrameProps` interface and the `EditFrame` component.
- Updated `PlaceholderCommon.getPlaceholderDataFromRenderingData` to accept `isEditing` (boolean) instead of `editMode`:

    ```ts
    getPlaceholderDataFromRenderingData(rendering: ComponentRendering | RouteData, name: string, isEditing: boolean)
    ```

- All field components now reference `field.metadata` instead of `field.editable`.

:::
:::tab{title="sitecore-jss-nextjs"}
{ .notintoc }

- Removed Chromes mode support.
- Removed the `getPublicUrl` function.
- Removed the `EditFrame` component.
- Removed the `HtmlElementRendering` interface.
- Removed the following services and middlewares:
    - `EditingDataCache`, `EditingDataDiskCache`, and `EditingData`.
    - `EditingDataMiddleware` and `EditingDataMiddlewareConfig`.
    - `EditingDataService`.
    - `ServerlessEditingDataService` and `ServerlessEditingDataServiceConfig`.
    - `VercelEditingDataCache`.
    - The `editingDataService` instance.
- `EditingConfigMiddleware` no longer accepts `config.pagesEditMode`.
- All field components now reference `field.metadata` instead of `field.editable`.

:::
:::tab{title="templates/next.js"}
{ .notintoc }

- Edit mode updates:
    - Removed exact checks for EditMode.Metadata.
    - Removed the editing data API router api/editing/data/\[key\].ts.
- General configuration updates:
    - Removed `config.publicUrl` usage.
    - Removed the `PUBLIC_URL` environment variable.
    - Removed the `nextConfig.assetPrefix` setting.
    - Removed the `nextConfig.env.PUBLIC_URL` environment variable.
    - Removed Next.js rewrites for the following:
        - Sitecore API Endpoints: `/sitecore/api/:path*`
        - Media items: `/-/:path*`
        - Sitecore service pages: `/sitecore/service/:path*`

:::
::::

## Update application dependencies in your existing JSS 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:
    - Replace `"@sitecore-jss/sitecore-jss-nextjs"` with `"@sitecore-content-sdk/nextjs"`, and make the same change to all references to the old dependency throughout your application.
    - Delete the `"@sitecore-jss/sitecore-jss-cli"` dependency.
    - Delete the `"@sitecore-jss/sitecore-jss-dev-tools"` dependency.
2. Install the dependencies with the following command:

    ```shell
    npm install
    ```

## Create a template Content SDK 1.3.1 application

To simplify the upgrade process as much as possible, create a Content SDK application. You can then copy some files from this template app into your existing app.

To create a Next.js Content SDK application:

1. In a console, run the following command:

    ```shell
    npx create-content-sdk-app@latest nextjs
    ```

2. If prompted to install the `create-content-sdk-app@latest` package, answer `y`.
3. Enter the folder path for the new app. For example, enter `./content-sdk-template`, to create the named subfolder in your current working directory.
4. When prompted, choose the same prerendering method (SSG or SSR) as used in your existing JSS application.

The script then installs the application dependencies.

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

The following sections explain how to synchronize files in your existing JSS application with corresponding files from your Content SDK template app.

### Update configurations and environment variables

This sections updates your existing app's configurations and environment variables to match the new Content SDK app.

To update your JSS app's configurations and environment variables:

1. Copy the `sitecore.config.ts` file from your template app into your existing app.
2. Throughout your app, replace all imports of config from temp/config and use the new sitecore.config.ts file instead:
    - Locate all instances of the following:

        ```ts
        import config from 'temp/config'
        ```

    - Replace these with the following:

        ```ts
        import scConfig from 'sitecore.config'
        ```

3. A new `page` parameter has been added to `SitecoreContext`. To support this change, update the `SitecoreContext` API configuration in the following files:
    - `[[...path]].tsx`
    - `500.tsx`
    - `404.tsx`

    In each file, set the `api` parameter to use `scConfig.api` and the `page` parameter to use `page` as shown in the following example:

    ```ts
    import scConfig from 'sitecore.config';
    ...
    const page = client.getPage(...);
    <SitecoreContext
      ...
      api={scConfig.api}
      page={page}
    >
    ```

4. Rename the following environment variables within your JSS app:

    <table style="width:100%;" class="informaltable frame-void rules-rows"><thead><tr><th class="th"><p>Old (JSS)</p></th><th class="th"><p>New (Content SDK)</p></th></tr></thead><tbody><tr><td class="td"><p><code class="code">SITECORE_API_KEY</code></p></td><td class="td"><p><code class="code">NEXT_PUBLIC_SITECORE_API_KEY</code></p></td></tr><tr><td class="td"><p><code class="code">SITECORE_API_HOST</code></p></td><td class="td"><p><code class="code">NEXT_PUBLIC_SITECORE_API_HOST</code></p></td></tr><tr><td class="td"><p><code class="code">SITECORE_SITE_NAME</code></p></td><td class="td"><p><code class="code">NEXT_PUBLIC_DEFAULT_SITE_NAME</code></p></td></tr><tr><td class="td"><p><code class="code">DEFAULT_LANGUAGE</code></p></td><td class="td"><p><code class="code">NEXT_PUBLIC_DEFAULT_LANGUAGE</code></p></td></tr><tr><td class="td"><p><code class="code">JSS_EDITING_SECRET</code></p></td><td class="td"><p><code class="code">SITECORE_EDITING_SECRET</code></p></td></tr></tbody></table>

5. If your existing app uses `SITECORE_EDGE_URL` for dev or staging, rename it `NEXT_PUBLIC_SITECORE_EDGE_URL`.

    > [!note]
    > `SITECORE_EDGE_CONTEXT_ID` does not need to be renamed.

6. If your existing solution requires client-side requests to the Edge endpoint, create a new environment variable named `NEXT_PUBLIC_SITECORE_EDGE_CONTEXT_ID` and give it the same value as `SITECORE_EDGE_CONTEXT_ID`.

    > [!note]
    > Doing this will expose your context ID secret on the client.

7. If your existing app uses `DISABLE_SSG_FETCH` rename it to `GENERATE_STATIC_PATHS`.

    > [!note]
    > The meaning and value of this variable has been logically inverted. If your existing solution uses this variable in the code, you must adjust them accordingly.

    > [!important]
    > See [The Sitecore configuration file](https://doc.sitecore.com/sai/en/developers/content-sdk/the-sitecore-configuration-file.html) for more information on the configuration properties and their corresponding environment variables.

8. Copy the `src/lib/sitecore-client.ts` file from your template app into the same folder in your existing JSS app.
9. Refactor all Next.js middleware in your existing app to use the new `defineMiddleware` utility:
    - For refactoring standard middleware, use `src/middleware.ts` in your template app as a reference.
    - For information and instructions about refactoring custom middleware to use defineMiddleware, refer to [Integrate custom middleware](https://doc.sitecore.com/sai/en/developers/content-sdk/10/integrate-custom-middleware.html "Integrate custom middleware").
10. In `[[..path]].tsx`, `404.tsx`, `500.tsx`, and `Layout.tsx`, remove all usages of `headLinks`.

### Refactor components and interfaces

This section refactors all components, interfaces, and other files to match the new Content SDK app's structure.

To refactor your files:

1. Copy the new component `src/components/SitecoreStyles.tsx` from your template app into the same folder in your existing JSS app.
2. In `Layout.tsx`, import `SitecoreStyles` and place the component after `Scripts`, as shown in the following example:

    ```ts
    import SitecoreStyles from 'src/components/SitecoreStyles';
    ...
        <Scripts />
        <SitecoreStyles layoutData={layoutData} />
    ...
    ```

3. Throughout your JSS app, remove all usages of the `publicUrl` property of the now-obsolete `config`.
4. Update references and imports for the following component, interfaces, higher-order components, and properties:

    <table style="width:100%;" class="informaltable frame-void rules-rows"><thead><tr><th class="th"><p>Old</p></th><th class="th"><p>New</p></th><th class="th"><p>Type</p></th></tr></thead><tbody><tr><td class="td"><p><code class="code">SitecoreContext</code></p></td><td class="td"><p><code class="code">SitecoreProvider</code></p></td><td class="td"><p>component</p></td></tr><tr><td class="td"><p><code class="code">SitecoreContextProps</code></p></td><td class="td"><p><code class="code">SitecoreProviderProps</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">SitecoreContextState</code></p></td><td class="td"><p><code class="code">SitecoreProviderState</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">SitecoreContextReactContext</code></p></td><td class="td"><p><code class="code">SitecoreProviderReactContext</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">WithSitecoreContextOptions</code></p></td><td class="td"><p><code class="code">WithSitecoreOptions</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">WithSitecoreContextProps</code></p></td><td class="td"><p><code class="code">WithSitecoreProps</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">WithSitecoreContextHocProps</code></p></td><td class="td"><p><code class="code">WithSitecoreHocProps</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">useSitecoreContext()</code></p></td><td class="td"><p><code class="code">useSitecore()</code></p></td><td class="td"><p>higher-order component</p></td></tr><tr><td class="td"><p><code class="code">withSitecoreContext()</code></p></td><td class="td"><p><code class="code">withSitecore()</code></p></td><td class="td"><p>higher-order component</p></td></tr><tr><td class="td"><p><code class="code">context</code></p></td><td class="td"><p><code class="code">page</code></p></td><td class="td"><p>property</p></td></tr><tr><td class="td"><p><code class="code">updateSitecoreContext</code></p></td><td class="td"><p><code class="code">updatePage</code></p></td><td class="td"><p>property</p></td></tr><tr><td class="td"><p><code class="code">sitecoreContext</code></p></td><td class="td"><p><code class="code">page</code></p></td><td class="td"><p>property</p></td></tr></tbody></table>

5. Remove the `SitecoreContext` interface and update any references with the new `Page` interface from the `SitecoreClient`.
6. Update references to the `getServerSideProps` and `getStaticProps` methods to `getComponentServerProps` without changing the existing method signature.

    If your component contains code that's executed based on static or server side Next.js context, import the `isServerSidePropsContext` helper method and implement it based on the following example:

    ```ts
    import { isServerSidePropsContext } from '@sitecore-content-sdk/nextjs/utils';

    ...

    export const getComponentServerProps: GetComponentServerProps = async (
    rendering,
    layoutData,
    context
    ) => {
    if (isServerSidePropsContext(context)) {
        // function implementation
    }
    };
    ```

7. Update references and imports for the following services if you use them directly or substitute them by using the methods in the `SitecoreClient` class:

    <table style="width:100%;" class="informaltable frame-void rules-rows"><thead><tr><th class="th"><p>Old</p></th><th class="th"><p>New</p></th><th class="th"><p>Type</p></th></tr></thead><tbody><tr><td class="td"><p><code class="code">RestComponentLayoutService</code></p></td><td class="td"><p><code class="code">ComponentLayoutService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">RestComponentLayoutServiceConfig</code></p></td><td class="td"><p><code class="code">ComponentLayoutServiceConfig</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">GraphQLEditingService</code></p></td><td class="td"><p><code class="code">EditingService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLEditingServiceConfig</code></p></td><td class="td"><p><code class="code">EditingServiceConfig</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">GraphQLDictionaryService</code></p></td><td class="td"><p><code class="code">DictionaryService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLDictionaryServiceConfig</code></p></td><td class="td"><p><code class="code">DictionaryServiceConfig</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">GraphQLLayoutService</code></p></td><td class="td"><p><code class="code">LayoutService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLLayoutServiceConfig</code></p></td><td class="td"><p><code class="code">LayoutServiceConfig</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">GraphQLPersonalizeService</code></p></td><td class="td"><p><code class="code">PersonalizeService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLPersonalizeServiceConfig</code></p></td><td class="td"><p><code class="code">PersonalizeServiceConfig</code></p></td><td class="td"><p>type</p></td></tr><tr><td class="td"><p><code class="code">GraphQLErrorPagesService</code></p></td><td class="td"><p><code class="code">ErrorPagesService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLErrorPagesServiceConfig</code></p></td><td class="td"><p><code class="code">ErrorPagesServiceConfig</code></p></td><td class="td"><p>interface</p></td></tr><tr><td class="td"><p><code class="code">GraphQLRedirectsService</code></p></td><td class="td"><p><code class="code">RedirectsService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLRedirectsServiceConfig</code></p></td><td class="td"><p><code class="code">RedirectsServiceConfig</code></p></td><td class="td"><p>type</p></td></tr><tr><td class="td"><p><code class="code">GraphQLRobotsService</code></p></td><td class="td"><p><code class="code">RobotsService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLRobotsServiceConfig</code></p></td><td class="td"><p><code class="code">RobotsServiceConfig</code></p></td><td class="td"><p>type</p></td></tr><tr><td class="td"><p><code class="code">GraphQLSiteInfoService</code></p></td><td class="td"><p><code class="code">SiteInfoService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLSiteInfoServiceConfig</code></p></td><td class="td"><p><code class="code">SiteInfoServiceConfig</code></p></td><td class="td"><p>type</p></td></tr><tr><td class="td"><p><code class="code">GraphQLSitemapXmlService</code></p></td><td class="td"><p><code class="code">SitemapXmlService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLSitemapXmlServiceConfig</code></p></td><td class="td"><p><code class="code">SitemapXmlServiceConfig</code></p></td><td class="td"><p>type</p></td></tr><tr><td class="td"><p><code class="code">GraphQLSitePathService</code></p></td><td class="td"><p><code class="code">SitePathService</code></p></td><td class="td"><p>service class</p></td></tr><tr><td class="td"><p><code class="code">GraphQLSitePathServiceConfig</code></p></td><td class="td"><p><code class="code">SitePathServiceConfig</code></p></td><td class="td"><p>interface</p></td></tr></tbody></table>

8. Delete the `DictionaryService` interface and remove any references to it.
9. Update the `src/lib/component-props/index.ts` file in your existing app using the one from your template app.
10. Throughout your app, wherever is used, do the following:
    - Update imports of `componentBuilder` to use `components` instead, as shown in the following example:

        ```ts
        import components from '.sitecore/component-map';
        ```

    - Within `<SitecoreProvider>`, replace usages of the `componentFactory` prop to use `components` instead, as shown in the following example:

        ```ts
        <SitecoreProvider
        componentMap={components} ...>
        ```

11. Update any remaining imports of `temp/componentBuilder` to use `.sitecore/component-map` instead.

### Finalize build process and cleanup

This section contains changes related to the build process and finalizes the upgrade process.

To edit the build process and clean up your project:

1. In your `package.json` file, do the following:
    - Remove the `start:watch-components` and `bootstrap` scripts and all mentions of these two scripts from the remaining scripts.
    - Remove the `jss` script.
    - Remove the `install-pre-push-hook` script
    - Remove the `scaffold` script
    - Update the `build` script with the following:

        ```json
        "build": "cross-env NODE_ENV=production npm-run-all --serial sitecore-tools:generate-map sitecore-tools:build next:build",
        ```

    - Update the `lint` script by removing linting for the script folder:

        ```json
        "lint": "eslint ./src/**/*.tsx ./src/**/*.ts",
        ```

    - (Optional) Add the following scripts, for dynamically generating the component map and building the Content SDK app:

        ```json
        "sitecore-tools:generate-map": "sitecore-tools project component generate-map",
        "sitecore-tools:generate-map:watch": "sitecore-tools project component generate-map --watch",
        "sitecore-tools:build": "sitecore-tools project build",
        ```

    - Rename the `start:connected` script to `dev` and replace it with the following:

        ```json
        "dev": "cross-env NODE_ENV=development npm-run-all --serial sitecore-tools:build --parallel next:dev sitecore-tools:generate-map:watch",
        ```

    - Rename the `start:production` to `start` and replace it with the following:

        ```json
        "start": "cross-env-shell NODE_ENV=production npm-run-all --serial build next:start"
        ```

2. Copy the `sitecore.cli.config.ts` file from your template app into your existing app.
3. Because the build time artifacts `metadata.json` and `sites.json` (the second of which used to be called `config.sites`) are now created under the .sitecore temp folder at the root of the app, you need to update the imports of these artifacts accordingly throughout your application, making sure to rename instances of config.sites to sites.json.
4. Content SDK introduces the `sitecore-tools:build` command that, similar to `next:build`, is used to generate build-time artifacts required for your app to function. Make sure this script is executed before you start your application.
5. In your existing app's next.config.js file, make the following changes:
    - Migrate all Next config plugin logic (previously located in the `src/lib/next-config` folder) and all associated custom settings into the `next.config.js` file, then delete the now-redundant files from the lib folder.
    - Replace the existing `defaultLocale` property with the following:

        ```json
        defaultLocale: process.env.DEFAULT_LANGUAGE || process.env.NEXT_PUBLIC_DEFAULT_LANGUAGE || 'en',
        ```

6. The `Page` type now includes a `mode` field of type `PageMode`, that provides runtime context (editing, preview, Design studio, etc). Update references to layout context properties like `pageState`, `pageEditing`, and `renderingType` with the new `page.mode` field as shown in the examples below:
    - If the rendering mode `isDesignLibrary`, find the following:

        ```csharp
        if (layoutData.sitecore.context.renderingType === RenderingType.Component) {
          ...
        }
        ```

        Replace with the following:

        ```csharp
        if (page.mode.isDesignLibrary) {
          ...
        }
        ```

    - If the rendering mode `isNormal`, find the following:

        ```csharp
        if (layoutData.sitecore.context.pageState === LayoutServicePageState.Normal) {
          ...
        }
        ```

        Replace with the following:

        ```csharp
        if (page.mode.isNormal) {
          ...
        }
        ```

    - Similarly, if the rendering mode `isEditing` or `isPreview`, update them to use the following:

        ```csharp
        if (page.mode.isEditing || page.mode.isPreview) {
          ...
        }
        ```

7. If you've customized your existing JSS app, refer to the obsolete JSS functionality section and make all changes necessary to refactor your code and then remove the obsolete parts of your app, such as:
    - Using appropriate data fetching functionality provided by `scClient`. Use your Sitecore Content SDK template app as a reference.
    - Replacing imports of `SitecorePageProps` to use `"@sitecore-content-sdk/nextjs"` instead of `"lib/page-props"`. For example:

        ```ts
        import { SitecorePageProps } from "@sitecore-content-sdk/nextjs"
        ```

    > [!note]
    > In their unaltered forms, the following files provided by the Next.js starter kit will need to be updated:
    >
    > -   `src/pages/api/robots.ts`
    >
    > -   `src/pages/api/sitemap.ts`
    >
    > -   `src/pages/[[...path]].tsx`
    >
    > -   `src/pages/404.tsx`
    >
    > -   `src/pages/500.tsx`
    >
    > -   `src/Bootstrap.tsx`
    >
    > -   `src/_app.tsx`

## Obsolete and revised functionality in your existing app

Some parts of existing JSS apps are either revised or no longer required in Content SDK apps, meaning they can be removed. However, if your app contains custom code that uses any of this obsolete functionality, or if you have any customizations in the affected files or folders, you will need to modify your app accordingly.

After you've finished refactoring, you can remove any obsolete parts to reduce the overall size of your app:

- The `scripts/config` folder, which contains the plugins that JSS used to generate the runtime config under the `src/temp` folder. All of this has been replaced by `sitecore.config.ts`, and a config file is no longer generated at build time.
- The `scripts/scaffold-component` folder, which contains the script for the `jss scaffold component` command. This is now replaced by a new CLI command `sitecore-tools scaffold`.
- The `scripts/templates` folder, which contains the templates JSS used for scaffolding components. This is now replaced by the new CLI configuration `sitecore.cli.config.ts`.
- The `scripts/generate-config.ts` script that generated the runtime config file. This is now replaced by `sitecore.config.ts`.
- The `scripts/generate-metadata.ts` script that generated the `metadata.json` required for editing integration. This is now replaced by the `generateMetadata()` function in `sitecore.cli.config.ts` which is executed by the new CLI command `sitecore-tools build`.
- The `scripts/generate-component-builder` script, which generated the component builder that manages registration of components. This is now replaced by `component-map`.
- The `scripts/generate-plugins.ts` script is no longer required.
- The `scripts/bootstrap.ts` script that handled running build-time scripts. This is now replaced by the CLI and `sitecore.cli.config.ts`.
- The `scripts/utils.ts` file that stores utilities for scripts is no longer used.
- If you've already [disabled graphQL code generation](https://doc.sitecore.com/sai/en/developers/jss/22/jss-sai/upgrade-jss-22-6-next-js-apps-to-version-22-7.html#UUID-8bf810d0-bf43-99db-baef-bd636958c593_section-idm1853500309652518) for your JSS app, the `/scripts` folder and the `tsconfig.scripts.json` file are no longer needed.
- The `src/lib/page-props-factory` plugins that created contextual `SitecorePageProps` objects. This is now replaced by the functions of `SitecoreClient`.
- `src/lib/site-resolver`, which is now replaced by `scClient.resolveSite()`.
- `src/lib/extract-path`, which must now be imported from `@sitecore-content-sdk/nextjs/utils`.
- `src/lib/sitemap-fetcher`, which is now replaced `scClient.getSiteMap()`.
- `src/lib/middleware`. All middleware is now defined in `middleware.tsx` and executed using the `defineMiddleware` utility function.
- `src/lib/next-config`. All Next.js config settings are now consolidated in `nextj.config.js`.
- The `src/lib/config.ts` type, which defined runtime config, is now replaced by `sitecore.config.ts`. The following services are now incorporated into `SitecoreClient`. If your solution includes customization of any of these services, you need to extend `SitecoreClient` and override any services that need to be extended:
    - `src/lib/graphql-client-factory `
    - `src/lib/dictionary-service-factory.ts`
    - `src/lib/layout-service-factory.ts`
    - `src/lib/graphql-editing-service.ts`
- The `src/lib/page-props.ts` type that defined `SitecorePageProps` has been moved to the base `@sitecore-content-sdk/nextjs` package, and must now be imported from there instead.

## Next steps

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

> [!note]
> **Web experiences and experiments**
> If you use Sitecore Personalize web experiences or experiments, after upgrading to the Content SDK, start or restart a single experience or experiment (or start a dummy one) in order to republish it and regenerate the `cloud-version.min.js` library. For instructions, see [Start an experience in Sitecore Personalize](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/introduction-to-experiences/managing-experience-status-in-sitecore-personalize/start-an-experience-in-sitecore-personalize.html), or [Start an experiment in Sitecore Personalize](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/managing-experiment-status-in-sitecore-personalize/start-an-experiment-in-sitecore-personalize.html). [Pausing experiments](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/introduction-to-experiments-in-sitecore-personalize/managing-experiment-status-in-sitecore-personalize/pause-an-experiment-in-sitecore-personalize.html) and [experiences](https://doc.sitecore.com/personalize/en/users/sitecore-personalize/introduction-to-experiences/managing-experience-status-in-sitecore-personalize/pause-an-experience-in-sitecore-personalize.html) and restarting them can invalidate test results.