Auth0中间件重定向为何引发404？（Next.js 13场景）

问题背景 #

按照Auth0官方示例配置中间件保护Next.js 13应用的指定路由，代码如下：

// middleware.js
import { withMiddlewareAuthRequired } from "@auth0/nextjs-auth0/edge";

export default withMiddlewareAuthRequired();

export const config = {
  matcher: ["/user/:path*", "/dashboard/:path*"],
};

线上构建版本运行时，通过浏览器DevTools网络面板观察到：所有指向/api/auth/login?returnTo=<some_path>的请求均返回**404（未找到）**错误。该请求由Next.js的页面预加载机制触发——当页面链接进入浏览器视口时，框架会先尝试直接获取未经过Auth0验证的页面资源，随后被中间件重定向至登录API路由。

但本地环境下，无论是通过npm run dev启动开发服务，还是npm run build+npm run start运行生产构建版本，均未出现该问题。

错误原因 #

• 部署平台路由规则缺失：部分非Vercel的托管平台不会自动识别Next.js的API路由，若未手动配置路由映射规则，/api/auth/*路径无法正确指向Auth0的路由处理逻辑。
• Auth0 API路由未正确构建：线上构建过程中可能因依赖缓存、安装不完整等问题，导致@auth0/nextjs-auth0自动生成的/api/auth系列路由未被打包进生产产物。
• 路由架构兼容性问题：若项目混用Next.js 13的App Router与Pages Router，且未按SDK要求在对应目录下配置Auth0路由处理，会导致API路由无法被识别。

修复方案 #

1. 配置部署平台的API路由规则 #

• 对于自定义部署环境，需添加路由转发规则：将所有/api/auth/*的请求转发至Next.js的API入口文件（通常为/.next/server/pages/api/auth/[...auth0].js）。
• 若使用Vercel，检查是否存在自定义重写规则干扰/api/auth/*路径，Vercel默认支持Next.js API路由，无需额外配置。

2. 确保Auth0 API路由正确生成 #

• 清理本地构建缓存：删除项目根目录下的.next和node_modules文件夹，执行npm install重新安装依赖，再运行npm run build重新构建。
• 手动确认路由文件存在：
  • 若使用Pages Router，确保pages/api/auth/[...auth0].js文件存在，内容如下：

    import { handleAuth } from '@auth0/nextjs-auth0';
    export default handleAuth();
    

  • 若使用App Router，在app/api/auth/[...auth0]/route.js中添加以下代码：

    import { handleAuth } from '@auth0/nextjs-auth0';
    export const GET = handleAuth();
    

3. 临时调整预加载行为 #

若上述方案无法立即生效，可通过禁用预加载规避错误请求：

• 在单个Link组件上禁用预加载：

  <Link href="/user/profile" prefetch={false}>用户中心</Link>
  

• 全局禁用预加载（仅作为临时方案，不推荐长期使用）：在next.config.js中添加配置：

  module.exports = {
    experimental: {
      prefetchPages: false
    }
  };
  

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