Next.js 13+（13.4.10）已访问页面中间件不运行问题求助

你的问题核心是静态页面被客户端缓存后，浏览器直接从本地读取资源，不会发起服务器请求，导致中间件无法拦截处理。以下是针对性的解决方案，完全基于Middleware的用法逻辑：

1. 为受保护页面设置禁止缓存的响应头 #

通过在页面中配置Cache-Control头，强制浏览器每次访问都向服务器发起请求，确保中间件能被触发：

App Router（Next.js 13+） #

在受保护页面的page.tsx中添加generateMetadata函数：

export async function generateMetadata() {
  return {
    headers: {
      // 禁止客户端缓存，每次都请求服务器
      'Cache-Control': 'no-cache, no-store, must-revalidate',
      // 可选：禁止CDN缓存（如果用了Vercel等平台的CDN）
      'Pragma': 'no-cache',
      'Expires': '0',
    },
  };
}

Pages Router #

在页面组件中使用getServerSideProps设置响应头：

export async function getServerSideProps(context) {
  context.res.setHeader('Cache-Control', 'no-cache, no-store, must-revalidate');
  context.res.setHeader('Pragma', 'no-cache');
  context.res.setHeader('Expires', '0');
  return { props: {} };
}

2. 精确配置中间件的匹配规则 #

确保middleware.ts中的matcher覆盖所有需要验证的页面，避免遗漏：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const hasAuthCookie = request.cookies.has('your-auth-cookie-name');
  if (!hasAuthCookie) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

// 配置匹配规则：包含所有受保护路径，排除登录/注册等公开页面
export const config = {
  matcher: [
    '/dashboard/:path*',
    '/profile/:path*',
    '/settings/:path*',
    // 排除公开页面
    '!/login',
    '!/signup',
    '!/', // 如果首页不需要验证
  ],
};

3. 客户端侧添加兜底验证（补充方案） #

即使设置了缓存头，极端场景下浏览器可能仍会读取缓存，因此可以在客户端组件中添加验证逻辑，作为服务器中间件的兜底：

'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function ProtectedPage() {
  const router = useRouter();

  useEffect(() => {
    // 检查客户端是否存在认证Cookie
    const authCookie = document.cookie.split(';').some(cookie => 
      cookie.trim().startsWith('your-auth-cookie-name=')
    );
    if (!authCookie) {
      router.push('/login');
    }
  }, [router]);

  return (
    <div>
      {/* 受保护内容 */}
    </div>
  );
}

原理说明 #

• 禁止缓存的响应头会让浏览器放弃本地缓存，每次访问都向服务器发送请求，中间件就能正常拦截并执行重定向逻辑。
• 精确的匹配规则确保中间件只处理需要验证的页面，避免不必要的性能开销。
• 客户端兜底验证覆盖了服务器中间件无法触发的极端缓存场景，保证用户权限验证的可靠性。

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