How to set layout service within same Next.Js application to access multiple site?

Question

We are configuring multiple site within single Next.js application. In experience editor the multisite work perfectly because its passing sc_site parameter as a query string. But in normal mode only default site work, the other site did not work if we browse different hostname other than default site.

So in Next.js for normal mode how we pass additional sc_site parameter with site name value?

In Next.js there is one class "SitecorePagePropsFactory" and its constructor initializing parameter for layout service. So can we make any change here to pass sc_site parameter to configure multisite or is there any another way?

this.dictionaryService = new RestDictionaryService({
      apiHost: config.sitecoreApiHost,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
    });
    this.layoutService = new RestLayoutService({
      apiHost: config.sitecoreApiHost,
      apiKey: config.sitecoreApiKey,
      siteName: config.jssAppName,
    });

Answer 1

The sc_site parameter getting constructed using "siteName" parameter which we can set in RestLayoutService and RestDictionaryService. These two are getting initialize in SitecorePagePropsFactory ( if you are using basic_company next.js example)

For standalone app which created using cli these two services getting set in layout-service-factory.ts and dictionary-service-factory.ts. So we can easily set sc_site by using RestLayoutService and RestDictionaryService.