Upgrade JSS 22.7 Next.js apps to version 22.8

Version: 22.x

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

Before you begin

If you haven't already done so, upgrade your app to JSS 22.7.
Familiarize yourself with the changelog. 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:

Update application dependencies in your existing app

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

To update your dependencies:

In your existing application's package.json file, update every @sitecore-jss package to version ~22.8.0.
Install the dependencies with the following command:
RequestResponse
```
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.

RequestResponse

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:
RequestResponse
```
<div className={mainClassPageEditing}>
```
Replace the existing contents of the div with the following line:
RequestResponse
```
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 to assist you if necessary.

Do you have some feedback for us?

If you have suggestions for improving this article,