Next.js配置rewrites路由重写时提示as与href不兼容报错

Error: The provided as value (/path/name/) is incompatible with the href value (/path/name/mobile/[league])

next.config.js #

async rewrites() {
  return {
    beforeFiles: [
      {
        source: '/path/name',
        destination: '/path/name/mobile',
        has: [
          {
            type: 'query',
            key: 'device',
            value: 'mobile',
          },
        ],
      },
      {
        source: '/path/name/:league',
        destination: '/path/name/mobile/:league',
        has: [
          {
            type: 'query',
            key: 'device',
            value: 'mobile',
          },
        ],
      },
    ],
  };
},

删除上述rewrites配置中第二条规则后项目可正常运行，但规则写法看似符合Next.js路由重写规范，需要定位配置错误点。

_middleware.ts #

import { NextRequest, NextResponse } from 'next/server';

const isMobile = (userAgent: string) =>
  /iPhone|iPad|iPod|Android/i.test(userAgent);

export function middleware(req: NextRequest) {
  const userAgent = req.headers.get('user-agent');

  if (userAgent) {
    if (isMobile(userAgent)) {
      const device = req.nextUrl.searchParams.get('device');

      if (!device) {
        return NextResponse.redirect(`${req.nextUrl.href}?device=mobile`);
      }
    }
  }
}

• 第二条重写规则source: '/path/name/:league'匹配范围过宽，会匹配/path/name/（带尾斜杠的根路径），把路径末尾的空值识别为:league参数，错误映射到动态路由/path/name/mobile/[league]。此时浏览器地址栏展示的路径（即as值）是/path/name/，和实际匹配到的动态路由结构不匹配，直接触发报错。
• middleware的重定向逻辑没有处理尾斜杠，也没有在非移动端/已有device参数的场景返回默认放行响应，会导致部分请求路径格式不统一，进一步放大重写规则的匹配歧义。
• 重写规则没有排除已经指向/path/name/mobile前缀的路径，存在循环重写的潜在风险。

1. 收窄第二条重写规则的匹配范围，通过路径正则约束:league参数非空，同时排除已指向mobile目录的路径，避免循环匹配和空参数匹配：

{
  source: '/path/name/:league((?!mobile$)[^/]+)',
  destination: '/path/name/mobile/:league',
  has: [
    {
      type: 'query',
      key: 'device',
      value: 'mobile',
    },
  ],
}

2. 调整middleware逻辑，统一清理路径尾斜杠，非匹配场景默认放行请求，避免生成格式异常的重定向地址：

import { NextRequest, NextResponse } from 'next/server';

const isMobile = (userAgent: string) =>
  /iPhone|iPad|iPod|Android/i.test(userAgent);

export function middleware(req: NextRequest) {
  const userAgent = req.headers.get('user-agent');
  if (userAgent && isMobile(userAgent)) {
    const device = req.nextUrl.searchParams.get('device');
    if (!device) {
      // 清理路径末尾多余斜杠，统一路径格式
      const cleanPath = req.nextUrl.pathname.replace(/\/+$/, '') || '/';
      const redirectTarget = new URL(cleanPath, req.url);
      redirectTarget.searchParams.set('device', 'mobile');
      return NextResponse.redirect(redirectTarget);
    }
  }
  // 非匹配场景必须放行，避免返回空响应
  return NextResponse.next();
}

3. （可选）在next.config.js中全局统一尾斜杠规则，从根源避免路径格式歧义：

/** @type {import('next').NextConfig} */
const nextConfig = {
  // 全局统一不使用尾斜杠，和重写规则的source路径格式保持一致
  trailingSlash: false,
  async rewrites() {
    // 替换为调整后的重写规则即可
  }
}

module.exports = nextConfig;

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