Recently, I faced an interesting challenge while working on a Sitecore MVC to Headless migration project. The application relied heavily on query string-based personalization to deliver tailored content, and I needed a way to carry over this behaviour into our new Next.js application using Sitecore JSS. Initially, I wasn’t sure how to handle this with GraphQL, but after a lot of investigation, I devised a solution. Below, I’ll share how I passed query string data into Sitecore’s GraphQL layout service and customized the Next.js app to handle it.
The Challenge: Query String-Based Personalization
Query string-based personalization is common in many applications, where different query parameters trigger the display of personalized content. While Sitecore MVC supports this out of the box, migrating to a headless architecture with Sitecore JSS and Next.js required additional logic to replicate this behaviour using GraphQL.
The Solution: Passing Query Strings to GraphQL Layout Service
To implement query string-based personalization in the Next.js JSS app, I made custom changes to pass the requested URL’s query string through Sitecore’s GraphQL layout service. Here are the steps I followed, along with code samples.
1. Modify layout-service-factory.ts to Include Query Strings
I extended the LayoutServiceFactory to allow for dynamic inclusion of query strings in the GraphQL request URL. This involved creating a createWithQuery() method to append query strings to the layout service request.
createWithQuery(query: string = “”): LayoutService {
return new GraphQLLayoutService({
endpoint: `${config.graphQLEndpoint}${query}`,
apiKey: config.sitecoreApiKey,
siteName: config.jssAppName,
});
}
2. Modify page-props-factory.ts to Inject Query Strings
The next step was to alter the SitecorePagePropsFactory to detect if the requested URL contains query strings. If query strings were present, I passed them to the createWithQuery() method to ensure the layout service request included them.
/** Query string-based personalization implementation **/
constSRRContext: any = context;
constresolvedUrl = SRRContext?.resolvedUrl;
if (resolvedUrl?.includes(“?”)) {
constqueryStringIndex = resolvedUrl.indexOf(‘?’);
constqueryStringPart = resolvedUrl.substring(queryStringIndex);
this.layoutService = layoutServiceFactory.createWithQuery(queryStringPart);
} else {
this.layoutService = layoutServiceFactory.create();
}
Here is the project repo and you will get complete code.
https://github.com/krithviktrs/Query-String-Based-Personalization-in-JSS/tree/main
Benefits of This Approach
- Preserving Personalization: This solution allows you to maintain query string-based personalization when migrating from Sitecore MVC to a headless architecture using JSS and Next.js.
- Flexible Layout Data Fetching: You can pass any query string to the layout service, enabling more flexible personalization and content delivery.
- Seamless Migration: By replicating MVC-based behaviour in a headless environment, you avoid the need for significant rewrites of personalization logic.
Migrating from Sitecore MVC to a headless solution with Next.js can present challenges, especially when dealing with personalization. By customizing how Next.js interacts with the Sitecore GraphQL layout service, we can maintain important features like query string-based personalization. The solution provided here ensures a smooth transition while leveraging the benefits of a modern headless architecture.
