menshen-ui · 门神

把门 + 钥匙孔的 favicon 上对,花了 3 次 commit + 1 次 revert

症状

给项目加 favicon(灰白色门 + 钥匙孔,呼应"门神 / vault 保险库"主题)。部署后浏览器 tab 还是空白,F12 Network 看不到 favicon.ico 请求,要么 404 要么被 302 跳登录页。前后 3 个 commit + 1 个 revert 才完全修好。

根因 1

Next.js 路由 favicon 跟 middleware 打架。第一次走 App Router 约定的 app/favicon.tsx(3a3b06f),Next 把它视为路由,middleware 的 matcher 把请求一并拦了走认证流程 → 跳登录页。

修法 1

Revert(ba81094),改放 /public/favicon.svg(21d5b8d)— public 下静态资源不进 Next.js 路由,理论上 middleware 也不该拦。

根因 2

但本项目 middleware 用了宽松 matcher(/((?!_next).*)),没显式排除 /favicon.svg → 静态资源照样被认证拦截 → 未登录用户拿不到 icon。

修法 2

abf1648 fix(middleware): allow /favicon.svg without auth — 在 middleware 入口判 pathname === '/favicon.svg' 直接 next();此后 tab 终于带图标。

commit

3a3b06f add(失败) → ba81094 Revert → 21d5b8d 改 public → abf1648 middleware 放行。

// middleware.ts — 任何 next-auth middleware 项目第一行要加
export function middleware(req: NextRequest) {
  const { pathname } = req.nextUrl
  // 静态资源 / 公开端点必须显式放行,否则 matcher 一律拦
  if (pathname === '/favicon.svg' || pathname.startsWith('/api/health')) {
    return NextResponse.next()
  }
  return authMiddleware(req)
}