Upgrade Content SDK 1.0.0 Next.js apps to version 1.1.0

This guide covers the required changes you must make to your existing Content SDK 1.0.0 applications to take advantage of the new features and improvements in version 1.1.0. Content SDK 1.1 includes enablers for the Design studio (including import map support), updates to ESLint, optimizations to the preview and editing render modes, Cursor rules, and more.

Because JavaScript and Next.js development is very flexible and customizable, this guide provides only general instructions and might not cover the specific configurations, custom code, or architectural decisions present in your existing application.

Before you begin

If you have a JSS app that you want to convert into a Content SDK app, follow the migration guide to upgrade your JSS Next.js 22.9 app to a Content SDK 1.1 app instead of this topic.
Review 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 must update dependencies.

To update your dependencies:

In your existing application's package.json file, update every @sitecore-content-sdk package to version 1.1.0.
Install the dependencies with the following command:
RequestResponse
```
npm install
```

Update the Next.js template files in your existing app

After updating your dependencies, you must synchronize files in your existing application.

To update the Next.js template files:

In sitecore.cli.config.ts:

Find the following import:
RequestResponse
```
import config from './sitecore.config';
```
Replace it with the following:
RequestResponse
```
import scConfig from './sitecore.config';
```

Find the following import:

RequestResponse

import {
  generateSites,
  generateMetadata,
  extractFiles,
} from '@sitecore-content-sdk/nextjs/tools';

Replace it with the following:

RequestResponse

import {
  generateSites,
  generateMetadata,
  extractFiles,
  writeImportMap,
} from '@sitecore-content-sdk/nextjs/tools';

Modify the build section to replace instances of scConfig: config with scConfig and include the writeImportMap as shown:

RequestResponse

build: {
  commands: [
    generateMetadata(),
    generateSites({
      scConfig,
    }),
    extractFiles({
      scConfig,
    }),
    writeImportMap({
      paths: ['src/components'],
      scConfig,
    }),
  ],
},

In src/Layout.tsx:

Find the following line:

RequestResponse

const mainClassPageEditing = mode.isEditing ? 'editing-mode' : 'prod-mode';

Add the following immediately after it:

RequestResponse

const importMapDynamic = () => import('.sitecore/import-map');

Add the loadImportMap prop to the DesignLibrary element as shown:
RequestResponse
```
<DesignLibrary loadImportMap={importMapDynamic} />
```

In the .sitecore folder, create a file named import-map.ts with the following contents:

RequestResponse

import { combineImportEntries, defaultImportEntries } from '@sitecore-content-sdk/nextjs/codegen';

export default combineImportEntries(defaultImportEntries, []);

In your existing application's .gitignore file, add the following entry after !.sitecore/component-map.ts:
RequestResponse
```
...
!.sitecore/import-map.ts
```

Next steps

To finalize the upgrade process, make sure you resolve any errors and warnings you encounter. Enable debug logging for Content SDK specific issues to assist you if necessary.

Do you have some feedback for us?

If you have suggestions for improving this article,