---
title: "Upgrade JSS 22.6 Next.js apps to version 22.7"
slug: "upgrade-jss-22-6-next-js-apps-to-version-22-7"
abstract: "How to upgrade your JSS 22.6 Next.js apps to version 22.7 to take advantage of React 19 and Next.js 15, and to remove automatic GraphQL code generation (making it an opt-in process)."
---
# Upgrade JSS 22.6 Next.js apps to version 22.7

This guide covers most of the changes you must make to your existing Next.js JSS 22.6 applications to take advantage of the improvements in version 22.7. However, because this process also involves [updating React to version 19](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) and [Next.js to version 15](https://nextjs.org/docs/app/guides/upgrading/version-15), you'll need to refer to the relevant guides for each framework to complete the upgrade process for your apps.

> [!important]
> An important change introduced in version 22.7 for Next.js is the removal of automatic code generation for GraphQL. The previous third-party package used for this (`graphql-let`) is no longer being maintained and causes potential security vulnerabilities. This upgrade guide explains how to disable `graphql-let`, and we strongly recommend you do so, especially if you have no need for automatic code generation.
>
> You can still manually implement code generation logic if you want it. This documentation includes a [guide](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/implement-graphql-code-generation.html "Implement GraphQL code generation") to doing so using `graphql-codegen` as an alternative package.

Because of 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 application. You can find them in your `package.json` file. For example, a JSS 22.6 application might use the following templates and add-ons:

- `nextjs` 
- `nextjs-styleguide` OR `nextjs-sxa`
- `nextjs-multisite` 

> [!note]
> **Before you begin**
> -   If you haven't already done so, [upgrade your app to JSS 22.6](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-5-next-js-apps-to-version-22-6.html "Upgrade JSS 22.5 Next.js apps to version 22.6").
>
> -   We recommend you read the official release notes for [React 19](https://react.dev/blog/2024/12/05/react-19) and [Next.js 15](https://nextjs.org/blog/next-15) to understand what has changed in these new versions.
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/releases/tag/v22.7.0). If your application is heavily customized, the changelog can provide guidance on what additional changes you need that are not be covered in this topic.

This topic describes how to:

:::walkthrough
1. [Update application dependencies in your existing app](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-6-next-js-apps-to-version-22-7.html#update-application-dependencies-in-your-existing-app)
2. [Create a JSS 22.7 Next.js application](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-6-next-js-apps-to-version-22-7.html#create-a-jss-227-nextjs-application)
3. [Update the Next.js template files in your existing app](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-6-next-js-apps-to-version-22-7.html#update-the-nextjs-template-files-in-your-existing-app)
4. [Update the SXA add-on](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-6-next-js-apps-to-version-22-7.html#update-the-sxa-add-on)
5. [Disable automatic GraphQL code generation](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-6-next-js-apps-to-version-22-7.html#disable-automatic-graphql-code-generation)
:::

## 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.7.0`.
    - Update the following dependencies to the specified versions:

        ```json
        "next": "^15.3.1",
        "react": "^19.1.0",
        "react-dom": "^19.1.0",
        "@types/react": "^19.1.2",
        "@types/react-dom": "^19.1.3",
        "eslint-plugin-react": "^7.37.5",
        ```

2. Install the dependencies with the following command:

    ```shell
    npm install
    ```

## Create a JSS 22.7 Next.js application

To simplify the upgrade process as much as possible, create a JSS 22.7 Next.js application. You can then copy some files from this app into your existing app.

To create a JSS 22.7 Next.js application:

1. In a console, run the following command:

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

2. If prompted to install the `create-sitecore-jss@22.7` package, answer *y*.
3. Enter the folder path for the JSS 22.7 Next.js app. For example, enter `*./jss227*`, 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 *n*.
6. Select other add-ons used by your existing application and press Enter.

The script then installs the application dependencies.

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

To update the Next.js template files:

- For every component that uses the `JSX` namespace (for example, if a `JSX.Element` type is present), add a `JSX` import from `react`.
    - In the `src/Bootstrap.tsx` file, the existing `react` import might look like this:

        ```typescript
        import { useEffect } from 'react';
        ```

    - In which case, add `JSX` to create the following:

        ```typescript
        import { useEffect, JSX } from 'react';
        ```

    > [!tip]
    > If you haven't previously customized these files, you can replace them with the versions from your template app.

## Update the SXA add-on

To update the SXA add-on:

1. If you have not customized the `src/assets/sass/components/_component-column-splitter.scss` file, replace it with the version in your template app. Otherwise, do the following:
    - Locate the following padding rules:

        ```scss
        padding-left: $default-padding / 2;
        padding-right: $default-padding / 2;
        ```

    - Replace those rules with the following:

        ```scss
        padding-left: $default-padding * 0.5;
        padding-right: $default-padding * 0.5;
        ```

2. If you have not customized the `/src/assets/sass/components/promo/_promo-shadow.scss` file, replace it with the version in your template app. Otherwise, reposition the CSS statements above the `@include respond-to(all-mobile)` block, as shown in the following example:
    - CSS statements previously:

        ```scss
        ...
          >.component-content {
            @include respond-to(all-mobile) {
              margin: 0 10px 30px 10px;
            }
            padding: 15px;
            margin: 0 0 30px 0;
            &:before, &:after {
              ...
        ```

    - CSS statements afterwards:

        ```scss
        ...
          >.component-content {
            padding: 15px;
            margin: 0 0 30px 0;
            @include respond-to(all-mobile) {
              margin: 0 10px 30px 10px;
            }
            &:before, &:after {
              ...
        ```

3. If you have not customized the `src/lib/next-config/plugins/sass.js` file, replace it with the version in your template app. Otherwise, add the following extra properties to your `sassOptions` configuration:

    ```javascript
    sassOptions: {
      ...
      quietDeps: true,
      silenceDeprecations: ["import", "legacy-js-api"],
    },
    ```

    > [!note]
    > This change is a temporary fix to suppress `sass` deprecation warnings from Bootstrap. When new versions of `bootstrap` and `font-awesome` are released and the warnings stop, these two properties can be removed.

## Disable automatic GraphQL code generation

This section explains how to remove your app's default, automatic code generation logic based on the no-longer-maintained `graphql-let` package. We strongly recommended that you do this unless you have a specific need to continue using `graphql-let`. If you would prefer to manually implement code generation using `graphql-codegen`, follow the [guide](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/implement-graphql-code-generation.html "Implement GraphQL code generation") to learn how.

> [!important]
> As with all upgrade steps, before you make any of the changes in this section, be aware of how they might affect customizations made to your own app. These instructions include removal of `graphql-codegen` dependencies, which you might decide to keep if you plan to implement manual code generation.

To disable automatic GraphQL code generation:

1. In your existing application's `package.json` file:
    - Delete the following dependencies:

        ```json
        "@graphql-typed-document-node/core": "^3.2.0",
        "graphql-let": "^0.18.6",
        ```

    - If you don't plan to use `graphql-codegen` to manually implement code generation, also delete the following dependencies:

        ```json
        "graphql": "~15.8.0",
        "graphql-tag": "^2.12.6",
        "@graphql-codegen/cli": "^5.0.0",
        "@graphql-codegen/import-types-preset": "^3.0.0",
        "@graphql-codegen/plugin-helpers": "^5.0.1",
        "@graphql-codegen/typed-document-node": "^5.0.1",
        "@graphql-codegen/typescript": "^4.0.1",
        "@graphql-codegen/typescript-operations": "^4.0.1",
        "@graphql-codegen/typescript-resolvers": "^4.0.1",
        ```

    - Unless you want to use the following script for fetching of GraphQL introspection data, for example as part of a [manual implementation of GraphQL code generation](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/implement-graphql-code-generation.html "Implement GraphQL code generation"), delete it:

        ```json
        "graphql:update": "ts-node --project tsconfig.scripts.json ./scripts/fetch-graphql-introspection-data.ts",
        ```

    - If your `bootstrap` script references `graphql-let`, remove that reference. The following example shows a valid `bootstrap` script with the `graphql-let` call removed:

        ```json
        "bootstrap": "ts-node --require dotenv-flow/config --project tsconfig.scripts.json scripts/bootstrap.ts",
        ```

    > [!note]
    > After making these changes, re-run `npm install` to update your app's dependencies.

2. Delete the following files associated with `graphql-let`:
    - `.graphql-let.yml`
    - `/scripts/fetch-graphql-introspection-data.ts`
    - `/src/temp/GraphQLIntrospectionResult.json`
3. If you have not customized the `tsconfig.json` file, replace it with the version in your template app. Otherwise, delete the following item from `compilerOptions.paths`:

    ```json
    "graphql-types": ["node_modules/@types/graphql-let/__generated__/__types__"],
    ```

## 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/xp/en/developers/hd/22/sitecore-headless-development/debug-logging-in-jss-apps.html "Debug logging in JSS apps") to assist you if necessary.