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:
(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.
