Next.js Middleware部署至Firebase Hosting后失效问题求解

以下是针对问题的排查和修复步骤：

1. 移除Middleware配置中多余的api字段 #

你的middleware.ts里的config包含了api.externalResolver: true，这个配置是给自定义API路由用的，和Middleware无关，会干扰Firebase对Middleware的解析。修改后的代码如下：

import { NextResponse } from "next/server";

export function middleware(request) {
  const url = request.nextUrl.clone();
  if (url.pathname === "/") {
    url.pathname = "/home";
    return NextResponse.redirect(url);
  }
}

export const config = {
  matcher: ["/", "/dashboard/:path*", "/login/:path*"],
  // 移除多余的api字段
};

2. 调整Firebase Hosting的cleanUrls配置 #

cleanUrls: true会自动移除请求路径的.html后缀，但可能和Next.js的路由系统、Middleware的路径匹配逻辑冲突，导致Middleware无法正确捕获请求。可以先禁用该配置测试：

{
  "hosting": {
    "source": ".",
    "cleanUrls": false
  }
}

如果必须保留cleanUrls，可配合添加trailingSlash: false保证路径匹配一致性：

{
  "hosting": {
    "source": ".",
    "cleanUrls": true,
    "trailingSlash": false
  }
}

3. 完善Firebase Framework Tools的部署配置 #

使用firebase-framework-tools部署Next.js时，需在firebase.json中指定框架后端集成：

{
  "hosting": {
    "source": ".",
    "cleanUrls": false,
    "frameworksBackend": {
      "region": "us-central1" // 替换为你的Firebase项目所在区域
    }
  }
}

部署时使用正确命令，避免仅部署静态资源：

firebase deploy --only hosting

4. 验证Middleware的路径匹配逻辑 #

临时给Middleware添加日志，部署后通过Firebase控制台查看请求路径是否被正确捕获：

export function middleware(request) {
  console.log("Received request path:", request.nextUrl.pathname);
  const url = request.nextUrl.clone();
  if (url.pathname === "/") {
    url.pathname = "/home";
    return NextResponse.redirect(url);
  }
}

可在Firebase控制台的Hosting > 日志中查看请求路径，确认是否符合matcher规则。

内容的提问来源于stack exchange，提问作者Rajendra A Verma