Next's routing is inconsistently case sensitive

[christianjuth]

Summary

The issue

Next's routing system seems to case sensitive very inconsistently.

This is one of those things that seems like it should be a huge problem, and I'm not really sure why not many others are talking about it.

From my testing:

• Pages are both cause sensitive and case insensitive
  • Leaf routes are case sensitive /one/Two is NOT the same as /one/two
  • Non leaf routes are case insensitive /One/two IS the same as /one/two
• Redirectls
  • Are case insenstive
• Rewrites
  • Seem case insensitive in a production build
  • Also seem to cause the page to crash durning development
    • Example /one/Two => /one/two/ crashes Next.js leading me to believe create an infinite loop
    • So maybe it is case insensitive?

Possible Solutions (hacks)

Solution 1 - Middleware

// src/middleware.ts
import { rewrite } from "@vercel/edge"

export function middleware(request: Request) {
  const url = new URL(request.url)

  // Don't modify files
  // Without this bundled js files and assets (e.g. fonts, images) will break
  if (/\.[a-z0-9]+$/i.test(url.pathname)) {
    return
  }

  // Note: we're excluding origin, search, and hash from normalization
  const lowerCaseUrl = new URL(
    `${url.origin}${url.pathname.toLowerCase()}${url.search}${url.hash}`
  )

  if (lowerCaseUrl.toString() !== url.toString()) {
    // For some reason Vercel rewrite doesn't seem to be working
    // rewrite(lowerCaseUrl)

   return Response.redirect(lowerCaseUrl.toString())
  }
}

This works, but it's very crude. It downcases everything in the pathname without really understanding what it's chaning. For example, if I had /blog/[slug] I think it would make more sense for blog to be case insensitive, but let the page decide how to handle the param slug. However, using this middleware solution slug can only be lowercase

Solution 2 - Rewrites

// next.config.js

module.exports = {
   async rewrites() {
        return [{
          source: '/one/Two,
          destination: "/one/two",
        }]
      },
}

This seems to work durning production, but crashes durning development. I could put in a flag so this redirect is only enabled in a build, but this already seems messy.

Fixing the underlying problem

I think it would be much better if Next added a config option that was something like next.caseSensitiveRoutes = boolean or something along those lines. Having it be an option would also prevent patching this from being a breaking change.

Has anyone else run into this problem, and am I missing something obvious?

See related #21498

Additional information

No response

Example

No response

[klovistore2]

yeah, I noticed the same, using caps in slug should be managed

[Elindo586]

Hmm...

[Elvis557]

Thanks for this update! Will be super cautious when dealing with it