Upgrade Content SDK 1.2.0 Next.js apps to version 1.3.1

{ .notintoc }

To update the Next.js template files in your Content SDK Next.js Pages Router app, in your existing app's middleware.ts file:

• Find the following:

  if (!scConfig.api?.edge?.contextId) {
      return NextResponse.next();
    }

• Replace it with the following:

  if (!scConfig.api?.edge?.contextId && !scConfig.api?.local?.apiHost) {
      return NextResponse.next();
    }

• Pass local configuration to the redirects middleware:

  const redirects = new RedirectsMiddleware({
      /**
       * List of sites for site resolver to work with
       */
      sites,
      // this was present before:
      ...scConfig.api.edge,
      // this needs to be added:
      ...scConfig.api.local,
      ....
      ......

{ .notintoc }

The editing config Router Handler has been updated to support component runtime information for compatibility with Sitecore Pages. Before this, the route handler only provided component names and metadata. Now, the Router Handler accepts an optional clientComponents parameter and returns additional information, including framework type and the client component list. This allows Pages to differentiate between server and client components, preventing invalid operations.

To update the Next.js template files in your Content SDK Next.js App Router app:

1. In your existing app's middleware.ts file:

   • Find the following:

     if (!scConfig.api?.edge?.contextId) {
         return NextResponse.next();
       }

   • Replace it with the following:

     if (!scConfig.api?.edge?.contextId && !scConfig.api?.local?.apiHost) {
         return NextResponse.next();
       }

   • Pass local configuration to the redirects middleware:

     const redirects = new RedirectsMiddleware({
         /**
          * List of sites for site resolver to work with
          */
         sites,
         // this was present before:
         ...scConfig.api.edge,
         // this needs to be added:
         ...scConfig.api.local,
         ....
         ......

2. In your application's /api/editing/config/route.ts:

   • Add the following import:

     import clientComponents from '.sitecore/component-map.client';

   • Pass clientComponents to the createEditingConfigRouteHandler:

     export const { GET, OPTIONS } = createEditingConfigRouteHandler({
       components,
       clientComponents,
       metadata,
     });

3. In src/Layout.tsx:

   • Remove the following import:

     import { DesignLibraryLayout } from './DesignLibraryLayout';

   • Add the import for DesignLibraryApp to replace the earlier one for DesignLibraryLayout:

     import { DesignLibraryApp } from "@sitecore-content-sdk/nextjs";

   • Remove the following usage of the DesignLibraryLayout:

     {mode.isDesignLibrary ? (
       <DesignLibraryLayout />
     ) : (

   • Replace it with the following:

     {mode.isDesignLibrary ? (
         route && (
           <DesignLibraryApp
             page={page}
             rendering={route}
             componentMap={componentMap}
             loadServerImportMap={() => import(".sitecore/import-map.server")}
           />
         )
       ) : (

   • Remove the DesignLibraryLayout.tsx file.

4. In src/Providers.tsx:

   • Pass the client import map inside SitecoreProvider so that it's available in context:

     <SitecoreProvider
           api={scConfig.api}
           componentMap={components}
           page={page}
           loadImportMap={() => import('.sitecore/import-map.client')}
         >
           {children}
     </SitecoreProvider>

   • In /src/app/api/editing/render/route.ts add POST to the exported handlers:

     export const { GET, POST, OPTIONS } = createEditingRenderRouteHandlers({});