Upgrade JSS 22.0 Next.js apps to Content SDK 1.5.1

Copy the following files from the template app into your existing app:

Throughout your app, replace all imports of config from temp/config and use the new sitecore.config.ts file instead:

A new page parameter has been added to SitecoreContext. To support this change, update the SitecoreContext API configuration in the following files:

In each file, set the api parameter to use scConfig.api and the page parameter to use page as shown in the following example:

import scConfig from 'sitecore.config'; 
... 
const page = client.getPage(...); 
<SitecoreContext 
  ... 
  api={scConfig.api} 
  page={page} 
>

Rename the following environment variables within your JSS app:

If your existing app uses SITECORE_EDGE_URL for dev or staging, rename it NEXT_PUBLIC_SITECORE_EDGE_URL.

If your existing app uses DISABLE_SSG_FETCH rename it to GENERATE_STATIC_PATHS.

Copy the src/lib/sitecore-client.ts file from your template app into the same folder in your existing JSS app.

Refactor all Next.js middleware in your existing app to use the new defineMiddleware utility:

In [[..path]].tsx, 404.tsx, 500.tsx, and Layout.tsx, remove all usages of headLinks.

Copy the new component src/components/content-sdk/SitecoreStyles.tsx from your template app into the same folder in your existing JSS app.

In Layout.tsx, import SitecoreStyles and place the component after Scripts, as shown in the following example:

import SitecoreStyles from 'src/components/SitecoreStyles'; 
...  
    <Scripts /> 
    <SitecoreStyles layoutData={layoutData} /> 
...

Throughout your JSS app, remove all usages of the publicUrl property of the now-obsolete config.

Update references and imports for the following component, interfaces, higher-order components, and properties:

Remove the SitecoreContext interface and update any references with the new Page interface from the SitecoreClient.

Update references to the getServerSideProps and getStaticProps methods to getComponentServerProps without changing the existing method signature.

If your component contains code that's executed based on static or server side Next.js context, import the isServerSidePropsContext helper method and implement it based on the following example:

import { isServerSidePropsContext } from '@sitecore-content-sdk/nextjs/utils';  
...  
export const getComponentServerProps: GetComponentServerProps = async (  
rendering,  
layoutData,  
context  
) => {  
if (isServerSidePropsContext(context)) {  
    // function implementation  
}  
};

Update references and imports for the following services if you use them directly or substitute them by using the methods in the SitecoreClient class:

Delete the DictionaryService interface and remove any references to it.

Update the src/lib/component-props/index.ts file in your existing app using the one from your template app.

Throughout your app, wherever is used, do the following:

Update any remaining imports of temp/componentBuilder to use .sitecore/component-map instead.

In your package.json file, do the following:

Copy the sitecore.cli.config.ts file from your template app into your existing app.

Because the build time artifacts metadata.json and sites.json (the second of which used to be called config.sites) are now created under the .sitecore temp folder at the root of the app, you need to update the imports of these artifacts accordingly throughout your application, making sure to rename instances of config.sites to sites.json.

Content SDK introduces the sitecore-tools:build command that, similar to next:build, is used to generate build-time artifacts required for your app to function. Make sure this script is executed before you start your application.

In your existing app's next.config.js file, make the following changes:

The Page type now includes a mode field of type PageMode, that provides runtime context (editing, preview, the Design Studio, etc). Update references to layout context properties like pageState, pageEditing, and renderingType with the new page.mode field as shown in the examples below:

If you've customized your existing JSS app, refer to the obsolete JSS functionality section and make all changes necessary to refactor your code and then remove the obsolete parts of your app, such as: