NextJS Rewrite自动将URL中的//转为/，如何保留双斜杠？

你在Next.js的next.config.js中配置了如下Rewrite规则，用于将本地路径映射至外部API路径：

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api_dev/:path*',
        destination: 'http:/some_api_path:9080/v1/:path*',
      },
    ]
  },
}

但当应用中传入URL /api_dev/param1/test/param2//param3/test 时，Next.js会自动将双斜杠转换为单斜杠，导致最终映射的路径丢失了原本的双斜杠结构。以下是解决方法：

方案：使用自定义中间件（Middleware）绕过路径规范化 #

Next.js默认会对URL做规范化处理（合并重复斜杠），要保留原始路径中的双斜杠，需要通过中间件手动处理请求：

1. 在项目根目录创建middleware.ts（或.js）文件
2. 编写中间件逻辑拦截目标路径，手动保留双斜杠并转发请求：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/api_dev/')) {
    // 获取原始请求的完整路径（包含双斜杠）
    const rawPath = request.url.slice(request.nextUrl.origin.length)
    // 构造目标API地址，替换前缀后保留原始路径结构
    const targetUrl = `http://some_api_path:9080/v1${rawPath.replace('/api_dev', '')}`
    
    // 转发请求到目标API，保留双斜杠
    return NextResponse.rewrite(new URL(targetUrl))
  }
  return NextResponse.next()
}

// 指定中间件仅对/api_dev开头的路径生效
export const config = {
  matcher: '/api_dev/:path*',
}

3. 移除next.config.js中对应的rewrite规则，避免与中间件逻辑冲突

原理说明 #

Next.js内置的rewrite机制会自动规范化路径，而中间件可以直接获取未被修改的原始请求URL，通过手动拼接目标地址，就能完整保留原始路径中的双斜杠结构。

内容的提问来源于stack exchange，提问作者Bookamp