---
title: "Upgrade JSS 22.7 Next.js apps to version 22.8"
slug: "upgrade-jss-22-7-next-js-apps-to-version-22-8"
abstract: "How to upgrade your JSS 22.7 Next.js apps to version 22.8 to benefit from the latest improvements."
---
# Upgrade JSS 22.7 Next.js apps to version 22.8

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 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.7](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-6-next-js-apps-to-version-22-7.html "Upgrade JSS 22.6 Next.js apps to version 22.7").
>
> -   Familiarize yourself with the [changelog](https://github.com/Sitecore/jss/releases/tag/v22.8.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/xp/en/developers/hd/22/sitecore-headless-development/upgrade-jss-22-7-next-js-apps-to-version-22-8.html#update-application-dependencies-in-your-existing-app)
2. [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-7-next-js-apps-to-version-22-8.html#update-the-nextjs-template-files-in-your-existing-app)
:::

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

    ```text
    npm install
    ```

## 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.8 app. You only need to apply these steps if you are using the nextjs-sxa add on.

To update the Next.js template files:

- Modify `src/Layout.tsx`:
    - Paste the following code block after the constant declarations.

        ```ts
        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 line:

        ```ts
        <div className={mainClassPageEditing}>
        ```

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

        ```ts
        renderContent()
        ```

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