How to handle route case sensitivity in Nextjs

[onmyway133]

By default, Nextjs route is case sensitive, so localhost:3000/About and localhost:3000/about are different routes.

To make uppercase routes become lowercase routes, we can add a middleware.tsx file to the src so it is same level as pages

import { NextResponse, NextRequest } from "next/server"

const Middleware = (req: NextRequest) => {
    if (req.nextUrl.pathname === req.nextUrl.pathname.toLowerCase()) {
        return NextResponse.next()
    }

    return NextResponse.redirect(
        new URL(req.nextUrl.origin + req.nextUrl.pathname.toLowerCase())
    )
}

export default Middleware