Description

Sitecore Experience Accelerator (SXA) installation might prevent Next.js-based JavaScript Services (JSS) applications from starting. The root cause of the issue is that regular Next.js app and Next.js app items, deployed into JSS tenant, refer to different templates.

The issue affects Sitecore Headless Rendering 18.0.0.

Solution

To resolve the issue, override the default template that is used for finding the app root for both dictionary service (samples\nextjs\src\lib\dictionary-service-factory.ts) and sitemap fetcher (samples\src\lib\sitemap-fetcher.ts):

• Pass in a jssAppTemplateId into the service:

  export class DictionaryServiceFactory {
    create(): DictionaryService {
      return new RestDictionaryService({
        apiHost: config.sitecoreApiHost,
        apiKey: config.sitecoreApiKey,
        siteName: config.jssAppName,
        jssAppTemplateId: '{GUID}' // some valid GUID here
      });
    }
  }
  ```

• Alternatively, the root item can be defined as follows:

  
      this._graphqlSitemapService = new GraphQLSitemapService({
        endpoint: config.graphQLEndpoint,
        apiKey: config.sitecoreApiKey,
        siteName: config.jssAppName,
        /*
        The Sitemap Service needs a root item ID in order to fetch the list of pages for the current
        app. If your Sitecore instance only has 1 JSS App, you can specify the root item ID here;
        otherwise, the service will attempt to figure out the root item for the current JSS App using GraphQL and app name.
        */
        rootItemId: '{GUID}'
      });
  ```