---
title: "Upgrade JSS 22.3 Next.js apps to version 22.4"
slug: "upgrade-jss-22-3-next-js-apps-to-version-22-4"
abstract: "How to upgrade your JSS 22.3 Next.js apps to version 22.4 to benefit from the latest improvements. The primary change in 22.4 is the removal of Axios as the default promise-based HTTP client, replacing it with a native JSS client that uses a built-in fetch implementation from Node.JS."
---
# Upgrade JSS 22.3 Next.js apps to version 22.4

This topic covers most of the changes you must make to your existing JSS 22.3 applications to benefit from the latest improvements in version 22.4. 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.

The 22.4 release of JSS removes the Axios dependency from all core `@sitecore-jss` packages. The dependency was deeply ingrained in core JSS functionality, and its removal provides greater flexibility in how your JSS app can communicate with Sitecore, be that via native Node fetch, some alternative fetch library, or one of the latest versions of Axios including current security fixes and features.

> [!note]
> For a full summary of the changes relating to removal of Axios as the default fetcher, refer to the related [changelog entry](https://developers.sitecore.com/changelog/xm-cloud/23012025/removal-of-axios-as-default-fetcher-for-jss).

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.3 application might use the following templates and add-ons:

- `nextjs` 
- `nextjs-styleguide` 
- `nextjs-multisite` 

> [!note]
> **Before you begin**
> -   If you haven't already done so, [upgrade your app to JSS 22.3](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-1-next-js-apps-to-version-22-3.html "Upgrade JSS 22.1 Next.js apps to version 22.3").
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/releases/tag/v22.4.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
2. [Update the nextjs-styleguide-tracking add-on](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-3-next-js-apps-to-version-22-4.html#update-the-nextjs-styleguide-tracking-add-on)
:::

## Update application dependencies in your existing app

For your upgraded application to work correctly, you must update dependencies.

To update your dependencies:

1. In your existing application's `package.json` file, update every `@sitecore-jss` package to version `~22.4.0`.
2. Install the dependencies with the following command:

    ```shell
    npm install
    ```

## Update the nextjs-styleguide-tracking add-on

To upgrade the `nextjs-styleguide-tracking` add-on:

- In `src/data-fetcher.ts`, do the following:
    - Locate the `AxiosDataFetcher` and `AxiosResponse` import statement.
    - Delete that statement and replace it with the following:

        ```ts
        import { NativeDataFetcher, NativeDataFetcherResponse } from '@sitecore-jss/sitecore-jss-nextjs';
        ```

    - Locate the `dataFetcher` function.
    - Delete that function and replace it with the following:

        ```ts
        export async function dataFetcher<ResponseType>(
          url: string,
          data?: unknown
        ): Promise<NativeDataFetcherResponse> {
          return new NativeDataFetcher().fetch<ResponseType>(url, data);
        }
        ```

## Next steps

Throughout the rest of your application, replace other Axios import statements as follows:

| Existing import | Replacement import |
| --- | --- |
| `AxiosDataFetcher` | `NativeDataFetcher` |
| `AxiosResponse` | `NativeDataFetcherResponse` |
| `AxiosDataFetcherConfig` | `NativeDataFetcherConfig` |

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.