Test Multi site setup with xm cloud and local next js app

 1. Verify multisite setup in Sitecore

In XM Cloud, make sure your cloned site has:

• A new Site Definition item (in /sitecore/content/<your site>).

• A hostname assigned under Site Grouping. This is important for routing.

If you have to create the site use the clone script in the SXA to create new website it will take care of referencing the new items wrt to your new site and new items automatically

2. ensure you have the multisite.ts middleware file with something like

// middleware/multisite.ts

import { MultisiteMiddleware } from '@sitecore-jss/sitecore-jss-nextjs/middleware';

import { siteResolver } from 'lib/site-resolver';

import type { MiddlewarePlugin } from '.';

export class MultisitePlugin implements MiddlewarePlugin {

  private multisiteMiddleware: MultisiteMiddleware;

  constructor() {

    this.multisiteMiddleware = new MultisiteMiddleware({

      siteResolver,

    });

  }

  async exec(req, res, next) {

    return this.multisiteMiddleware.getHandler()(req, res, next);

  }

}

Somewhere in your code there should be SiteResolver file also that decides which site to execute in the multisite.ts

There also should some code related to the multisite.ts as follows somewhere in your project like

import type { SiteInfo } from '@sitecore-jss/sitecore-jss-nextjs/site';

import config from 'temp/config';

import type { SiteResolverPlugin } from '..';

class MultisitePlugin implements SiteResolverPlugin {

  exec(sites: SiteInfo[]): SiteInfo[] {

    // Add preloaded sites

    sites.push(...(JSON.parse(config.sites) as SiteInfo[]));

    return sites;

  }

}

export const multisitePlugin = new MultisitePlugin();

Below is the SiteResolver

import type { SiteInfo } from '@sitecore-jss/sitecore-jss-nextjs/site';

import { SiteResolver } from '@sitecore-jss/sitecore-jss-nextjs/site';

import * as plugins from 'temp/site-resolver-plugins';

/*

  The site resolver stores site information and is used in the app

  whenever site lookup is required (e.g. by name in page props factory

  or by host in Next.js middleware).

  By default, the app is single-site (one JSS app per Sitecore site).

  However, multi-site is available with the `nextjs-multisite` add-on.

*/

export interface SiteResolverPlugin {

  /**

   * A function which will be called during sites collection

   */

  exec(sites: SiteInfo[]): SiteInfo[];

}

const sites = (Object.values(plugins) as SiteResolverPlugin[]).reduce(

  (sites, plugin) => plugin.exec(sites),

  []

);

export const siteResolver = new SiteResolver(sites);

3. Once you site is created then in the SXA Site Grouping you need to provide value in the sitename and hostname field

Because these setting will be used to confirm which site to execute.

4. Configure .env.local

SITECORE_API_KEY=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx // this is used for querying from preview

SITECORE_API_HOST=https://your-xmcloud-cmsinstance-url.sitecorecloud.io // this is preview graphql url in case to query from Edge url will be https://edge.sitecorecloud.io/

SITECORE_EDGE_CONTEXT_ID=your-edge-context-id // this is used for querying from edge

NEXT_PUBLIC_SITECORE_API_HOST=http://localhost:3000

GRAPH_QL_ENDPOINT=https://edge.sitecorecloud.io/api/graphql/v1 //this is Edge graphql url

GRAPH_QL_ENDPOINT=https://your-xmcloud-cmsinstance-url.sitecorecloud.io/sitecore/api/graph/edge // this is preview graphql url

Yellow setting are required for checking the preview mode site and amber are required to check the Edge (published) mode site.

5. If you noticed in the point 2, the sites information are read from 

config.sites, therefore you need to setup one more setting in the .env.local as 

#multisites

SITES=[{"name":"firstsitename","hostName":"firstsitename.localhost","language":"en"},{"name":"secondsitename","hostName":"secondsitename.localhost","language":"en"}]

6. Use multiple hostnames locally

Edit your hosts file (C:\Windows\System32\drivers\etc\hosts on Windows or /etc/hosts on Mac/Linux):

127.0.0.1 firstsitename.localhost

127.0.0.1 secondsitename.localhost

Now you can run your Next.js app with:

• http://site1.localhost:3000 → serves Site 1

• http://site2.localhost:3000 → serves Site 2

(based on your resolver logic).

7. Run locally

Start Next.js as usual:

npm run dev or npm run start:connected

8. Here it will work when you will hit http://firstsitename.localhost:3000 

-> it will go to your nextjs app because next js app is running on 3000 port 

-> it will go to the multisite.ts and will read the setting for config.sites 

-> config.site will give array of [{"name":"firstsitename","hostName":"firstsitename.localhost","language":"en"},{"name":"secondsitename","hostName":"secondsitename.localhost","language":"en"}] because you have set in the .env.local setting

-> based on the hostname it will get the sitename from the JSON's name property

-> graphql will internally pass the sc_site query with that site name 

-> based on your setting specific to the yellow or amber the data will be provided to you from cms.