XMCloud Vercel app Redirect URL from uppercase to lowercase

Question

We have an XMCloud application using NextJs, which we are deploying to Vercel. On the Vercel side, it is working fine. We have a requirement where if someone is adding uppercase/Camelcase in the URLs or a single/multiple uppercase chars in the URL client wants it to redirect to lowercase. see below example -

• https://mydomain.com/AboutUs -> https://mydomain.com/aboutus
• https://mydomain.com/Aboutus -> https://mydomain.com/aboutus
• https://mydomain.com/ABOUTUS-> https://mydomain.com/aboutus
• https://mydomain.com/ABOUtus -> https://mydomain.com/aboutus

Since this is the next 12.3 application, I tried updating the code into middleware like this -

if (req.nextUrl.pathname !== req.nextUrl.pathname.toLowerCase()) {
   const url = req.nextUrl.clone()
   url.pathname = url.pathname.toLowerCase()
   url.href = url.href.toLowerCase();
   url.locale = req.nextUrl.locale;
   return NextResponse.redirect(url)
}

the above code is working fine locally with connected mode but on vertical it is changing the URL into lowercase but at the same time refreshing the page again and again in 2-3 seconds (infinite times). Anyone please provide some insight on this issue?

Answer 1

We have achieved this by creating a custom middleware function.

• Create a file for your custom middleware, let's say smallcase-url, in your project's directory, such as src/<appname>/src/lib/middleware/smallcase-url.ts

import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

export function smallcaseurl(req: NextRequest): NextResponse {
  const { pathname, origin } = req.nextUrl;
  if (pathname === pathname.toLowerCase()) {
    return NextResponse.next();
  }
  return NextResponse.redirect(new URL(origin + pathname.toLowerCase()), 308);
}

• Import the smallcaseurl function and include it in your main middleware, typically located at src/<appname>/src/middleware.ts. Make sure the smallcaseurl middleware is applied before other middleware or routing logic.

import type { NextRequest, NextFetchEvent } from 'next/server';
import middleware from 'lib/middleware';
import { smallcaseurl } from 'lib/middleware/smallcase-url';

// eslint-disable-next-line
export default async function (req: NextRequest, ev: NextFetchEvent) {
  // Apply the existing middleware.
  await middleware(req, ev);

  // Apply the smallcaseurl middleware to handle URL case-insensitivity.
  return smallcaseurl(req);
}

...

Answer 2

In your case, the issue might be that you appear to be lower-casing parts of the URL that shouldn't be. url.href = url.href.toLowerCase(); converts the entire href attribute, including the protocol, domain, path, query strings, and anchors, to lowercase. If your application or a third-party service (ex. ads / analytics tracking) your application integrates with is case-sensitive with respect to query string parameters or values, converting them to lowercase might break functionality.

When you inspect the Network tab in your browser, check if you see other redirects that you are not expecting, such as images, JS, or CSS.

I also recommend double checking your Sitecore configs for URL and link generation settings (example).

General Considerations

Perhaps this requirement is partially driven by the client wanting to improve SEO via "canonicalization" of URLs and to clean up their analytics. Variations in capitalization in a pathname can appear as separate pages in analytics dashboards. Otherwise, it would be helpful to see a well articulated list of reasons why the redirects are important to your client, as this change can have substantial implications.

Here are a few other considerations:

1. Anchors (#My-Anchor) are case-sensitive. Converting anchors to lowercase could result in the browser not being able to locate the intended section of the page.
2. The middleware approach will also result in more Edge Middleware executions because you would be turning 1 request into 2.