0

We have our website set up with XM Cloud deployed on Vercel, using Next.js with TypeScript. We've configured Sitecore to replace spaces with hyphens in URLs to improve SEO performance.

However, we've noticed that URLs with spaces don't work on Vercel. For example, if an item is named "ABC Test," it works fine as https://site.com/ABC-TEST, but https://site.com/ABC TEST gives a 404 error.

We've identified a few potential solutions, like tweaking next.config.js, adjusting URL filtering, or making changes in [[...path]].tsx or vercel.config.

What's the best way to handle this issue? Any advice based on your experience?

1 Answer 1

1

You can use middleware.ts file to perform the rewrite for the urls containing space as below:

  import { NextRequest } from 'next/server';
  import type { NextFetchEvent } from 'next/server';
  import middleware from 'lib/middleware';

  export default async function (req: NextRequest, ev: NextFetchEvent) {
     const url = new URL(req.url);
     if (url.pathname.includes('%20')) {
      url.pathname = url.pathname.replace(/%20/g, '-');
      const modifiedReq = new NextRequest(url, req);
      return middleware(modifiedReq, ev);
     }
  }
  return middleware(req, ev);

Using above approach, it will rewrite the url to page with '-' using NextResponse redirect function.

Note: This was registered as one of the bug to Sitecore as well, with the reference number 584322 and DP-2077. It occured due to an inconsistency in the Experience Edge (Delivery) endpoint's behavior, in which route path is matched with url.Path which is encoded during publishing. More details on the same can found here:

https://sitecorecorner.wordpress.com/2023/11/17/page-items-with-spaces-in-their-names-redirected-to-the-not-found-page-in-the-next-js-application/

Hope this helps!!!

3
  • Thanks @ckhanna! We've actually already attempted that option, but unfortunately, it didn't yield the desired results. The only solution that proved effective was to modify the vercel.config. Since you provided this answer, could we assume that you've tested or implemented this approach using a similar setup (Xm Cloud with Vercel Next.js)? Commented May 5 at 23:58
  • ya @Jitendrasoni I have implemented these changes on XMCloud with NextJs..Were you able to check pathname was getting resolve correctly with hyphens?
    – ckhanna
    Commented May 6 at 5:05
  • @Jitendrasoni I have modified above solution to work with multisite as well..Can you please check on your side as well...Hope this helps!!!
    – ckhanna
    Commented May 6 at 6:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.