How to pass additional/custom query string parameter to Sitecore layout service request from NEXT JS?

Are you working with Sitecore Next JSS and coming across any requirement to pass additional or custom query string parameters to Sitecore layout service requests from Next JS?

- If yes, follow the below steps which will guide you to extend the RestLayoutService from the Next JSS layer.

The custom query string parameters can be passed by tweaking the file-\src\lib\parameterized-rest-layout-service.ts.

Step 1: Update file-\nextjs\src\lib\parameterized-rest-layout-service.ts

import {
  RestLayoutService,
  RestLayoutServiceConfig,
} from "@sitecore-jss/sitecore-jss-nextjs";

interface FetchParams {
  [param: string]: string | number | boolean;
  sc_apikey: string;
  sc_site: string;
  sc_lang: string;
  tracking: boolean;
}

export class ParameterizedRestLayoutService extends RestLayoutService {
  constructor(
    private config: RestLayoutServiceConfig,
    private userId?: any,
    private isRestricted?: any,
    private prvURL?: any
  ) {
    super(config);
  }

  protected getFetchParams = (language?: string): FetchParams => {
    const fetchParams: FetchParams = {
      sc_apikey: this.config.apiKey,
      sc_site: this.config.siteName,
      sc_lang: language || "",
      tracking: this.config.tracking ?? true,
    };
    if (this.userId) {
      fetchParams.userid = this.userId;
    }
    if (this.prvURL !== "") {
      fetchParams.isRestricted = true;
      fetchParams.prvURL = this.prvURL;
    }

    return fetchParams;
  };
}

Step: 2. Read the query string parameters from LayoutService context

In order to read the query string parameters from the Sitecore end, we need to extend the layout service context. To know more about extending the layout service, you can refer to the blog mentioned below:

https://sitecoreknowledgehub.blogspot.com/2023/09/how-to-extend-sitecore-jss-layout.html