XM Cloud: Extending Functionality with Custom Solutions

Alias Redirects

While XM Cloud includes an aliases button in its interface, you may have noticed that it doesn't do anything out of the box. Here's how I implemented a functional alias redirect system using Next.Js redirects:

The Solution

1. Create a Custom Template with the following fields:

• Redirect Type (301 or 302)
• Source Path
• Target Path

1. Add the Item under the path: “sitecore/content/tenant/site/settings”
2. Implement in next.config.js to leverage Next.Js redirect functionality:
3. 

Important Note: Next.Js redirects only support up to 1024 redirects. If you need more than that, you'll need to use a Next.Js Middleware approach instead.

Vanity URLs: Seamless URL Rewriting

Vanity URLs are like redirects but use rewriting instead, which keeps the original URL in the browser while showing different content. This creates a seamless experience where users don't perceive any difference in functionality.

The Solution

1. Create a Custom Template with these fields:

• URL Path (alias)
• Target Item
• Keywords (for partial matching)

1. Implement as Next.Js Middleware for URL rewriting: 
2. 

This implementation allows for both exact URL matching and keyword-based partial matching, giving content editors flexibility in defining their vanity URLs.

Ancestor Fallback: Never Show a 404

There are times when clients don't want to ever show a 404 page. The Ancestor Fallback feature addresses this need by finding the nearest parent page that has a valid layout when the requested page doesn't exist.

The Challenge

With traditional Sitecore XP, we had a lot of control through pipelines, but XM Cloud requires a different approach. Fortunately, GraphQL provides some unique capabilities we can leverage.

The Solution

I created a middleware plugin that:

1. Checks if the current path has a layout (valid page)
2. If not, finds the closest parent with a layout using GraphQL hasLayout parameter
3. Redirects users to that parent page, preventing any 404 errors

Here's the implementation as a NextJS middleware plugin:

The GraphQL Query The key to this implementation is the GraphQL query that takes advantage of the hasLayout parameter to find valid ancestor pages:

How It Works

1. When a user requests a non-existent page, the middleware intercepts the request

2. It first checks if the current path has a layout using the GetLayoutQuery

3. If not, it removes the last segment of the path to get the parent path

4. It then uses the GetLayoutAndAncestors query to: 

• Check if the parent has a layout
• Get a list of ancestors that have layouts

5. The middleware prioritizes the closest valid parent, then ancestors as fallback options

6. It redirects the user to the first valid option, preventing any 404 errors

Enhancement Opportunity

This approach could be further enhanced by integrating this logic into the OOTB NormalModePlugin of JSS Next.Js to only trigger when a 404 is thrown and for a more seamless implementation.

Conclusion

XM Cloud provides a solid foundation, but sometimes you need to extend its functionality to meet specific requirements. The three features we've explored—Alias Redirects, Vanity URLs, and Ancestor Fallback—demonstrate how you can leverage Next.Js features like redirects, rewrites, and middleware to enhance your XM Cloud implementation. By implementing these solutions, you can provide content editors with more flexibility and create a more seamless experience for your site visitors. If you want to learn more about Sitecore XM Cloud implementations, please do not hesitate to reach out to me either on LinkedIn or Contact Us form on the website.