How to handle route case sensitivity in Nextjs
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
