Next.js中间件报错：Error: Invariant: attempted to hard navigate to the same URL

这个报错的核心是你的中间件在某些场景下会触发重定向到与当前页面完全相同的URL，Next.js客户端路由机制检测到这种无效硬导航后抛出错误。具体问题出在：

• 手动拼接URL时，未处理hash部分，还可能忽略了origin的大小写差异（浏览器不区分域名大小写，若origin含大写字母，拼接后的URL会被浏览器解析为和当前URL一致）。
• 虽然判断了pathname是否为小写，但手动拼接字符串的方式可能导致生成的目标URL和当前请求URL实际完全相同，触发不必要的重定向。

修复思路是利用Next.js提供的URL对象安全修改路径，避免手动拼接的错误，同时确保仅在路径确实需要转换时才重定向：

修改后的中间件代码：

import { NextResponse } from "next/server";

const Middleware = (req) => {
  const url = req.nextUrl.clone();
  
  // 排除API路由和Next.js内部资源路由
  if (url.pathname.startsWith('/api') || url.pathname.startsWith('/_next')) {
    return NextResponse.next();
  }

  const lowerPathname = url.pathname.toLowerCase();
  // 仅当原路径与小写路径不同时才重定向
  if (url.pathname === lowerPathname) {
    return NextResponse.next();
  }

  // 修改路径为小写，自动保留hash、search等其他部分
  url.pathname = lowerPathname;
  return NextResponse.redirect(url);
};

export default Middleware;

额外说明：

• 使用req.nextUrl.clone()复制URL对象，避免修改原请求对象。
• 新增排除/_next/开头的路由，防止对Next.js静态资源、组件等内部资源触发不必要的重定向。
• 直接操作URL对象的pathname属性，自动保留hash、search等其他URL部分，避免手动拼接丢失信息。

内容的提问来源于stack exchange，提问作者Agustin G.