Solving Case-Sensitivity Issues in Next.js Routes with Middleware

When building a Next.js application, you may run into a situation where URLs are treated as case-sensitive. This means that /Unlimited and /unlimited are recognized as different routes, which can lead to 404 errors if users enter URLs with incorrect capitalization. In this post, I'll walk you through how I solved this problem by creating a middleware to handle case-insensitive routing.

The Problem

Next.js routes are case-sensitive by default. This means that if a user navigates to /Unlimited, they might get a 404 error, even though the correct route is /unlimited. Here's a real-world example of the issue:

• /unlimited works perfectly.
• /Unlimited returns a 404 page

This behavior can lead to poor user experience, especially since URLs can easily be mistyped or linked with incorrect capitalization. To fix this, I implemented a middleware that automatically redirects any uppercase URLs to their lowercase equivalents.

The Solution: Next.js Middleware

Next.js has a powerful middleware feature that allows you to execute custom logic before a request is completed. This is the perfect place to handle URL normalization and ensure that all routes are treated in a case-insensitive manner.

Here's the step-by-step breakdown of the solution:

1. Create a middleware.js file in the root of the src/ directory (or just in the root of your project if you’re not using src/).

2. Implement the middleware to redirect uppercase paths to lowercase. The middleware will check the pathnameof the requested URL and compare it to the lowercase version. If the URL is not already in lowercase, the user will be redirected to the lowercase version of the path.

Here’s the complete code for the middleware:

import { NextResponse } from 'next/server';

export function middleware(request) {
  const { pathname } = request.nextUrl;

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

  return NextResponse.next();
}

How It Works

• 1. The middleware function takes a request object, which gives us access to the URL being requested.
• 1. It extracts the pathname from request.nextUrl, which is the part of the URL after the domain (e.g., /Unlimited).
• 1. We then check if the pathname is already in lowercase. If not, we create a new NextResponse that redirects the user to the lowercase version of the path using NextResponse.redirect().
• 1. If the URL is already in lowercase, the middleware simply allows the request to proceed by calling NextResponse.next().

Why This Approach is Great

• User Experience: Users don’t have to worry about typing the exact casing for URLs. If they accidentally type /Unlimited, they are automatically redirected to /unlimited.

• SEO: Redirecting to a single URL version prevents duplicate content issues, which could affect SEO rankings.

• Efficiency: By handling this in middleware, we ensure that the redirect occurs early in the request lifecycle, keeping the solution efficient.

Conclusion

With just a few lines of code, you can easily handle case-sensitivity issues in Next.js and improve both user experience and SEO. The middleware approach is simple and efficient, ensuring that your application’s routes are always treated as case-insensitive.

If you’re working on a Next.js project and encounter similar issues, try using middleware to solve the problem. It's a flexible solution that integrates smoothly with your existing setup.