Azure Static Web App routes case sensitive

Question

I'm building a static site using nextjs and hosting it in azure using the static web app offering. After I deployed my app, I noticed that the dynamically generated url's from next export are actually case sensitive, i.e. https://MYAPP.azurestaticapps.net/MYPAGE does not resolve but https://MYAPP.azurestaticapps.net/mypage does resolve. Is there a way to solve this at either the nextjs or azure level?

Answer 1

Normally in nextjs, all URL resolution should be case insensitive, but there is currently a bug "URL resolution case sensitivity is inconsistent" https://github.com/vercel/next.js/issues/21498

There is workaround to fix the issue - implement redirecting with a dynamic route:

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import Error from 'next/error'

export default function ResolveRoute() {
const router = useRouter()

useEffect(() => {
    if (router.pathname === router.pathname.toLowerCase()) {
        // Route is already lowercase but matched catch all
        // page not found, display 404
        return <Error statusCode={404} />
    } else {
        router.push(router.pathname.toLowerCase())
    }
})

return <p>Redirecting...</p>
}

Another option is to use Azure ApplicationGateway as its rules are case insensitive.

https://learn.microsoft.com/en-us/azure/application-gateway/url-route-overview