NextJS自定义404页结合middleware.ts出现报错求助

核心结论 #

问题根源不在getStaticProps配置，完全是middleware.ts的身份校验逻辑干扰了Next.js的404页面处理流程。

为什么会出现这些异常？ #

1. fallback:false的行为确认：你理解的没错，当fallback:false时，未在getStaticPaths中定义的路径，Next.js会直接返回404页面，不会尝试渲染对应页面组件。所以静态生成的配置本身没有问题。
2. middleware导致的两种异常：
   • 默认404页出现无限请求：说明你的middleware对404页面的请求做了重定向操作，比如把404路径重定向到登录页或其他路由，而该路由又触发了404，形成循环。
   • 自定义404页报错：自定义404是React组件，middleware的校验逻辑可能在请求404页面时，破坏了组件的加载上下文（比如修改了请求头、传递了异常的props），导致组件渲染时出现TypeError: Cannot read properties of undefined (reading 'default')（通常是某个模块导入失败或依赖的props未正确传递）。另外，Next.js内部自带默认ErrorBoundary，所以会抛出那个提示，即便你没手动设置。

解决步骤 #

1. 在middleware中排除404页面的校验：
   直接在middleware开头添加判断，对404页面的请求跳过身份校验和重定向逻辑：

   import { NextRequest, NextResponse } from 'next/server';
   
   export function middleware(request: NextRequest) {
     // 跳过404页面的校验逻辑
     if (request.nextUrl.pathname === '/404') {
       return NextResponse.next();
     }
   
     // 你的身份校验、重定向逻辑...
   }
   

2. 检查middleware的重定向逻辑：
   确保重定向的目标路径是存在的，且不会把404请求卷入重定向循环。比如未登录用户重定向到/login，要确认/login是有效路由，不会触发404。
3. 排查自定义404.tsx的代码：
   确保404组件没有依赖身份校验相关的状态或API（比如不需要获取用户信息），避免因为middleware拦截后缺少必要上下文导致报错。

澄清误区 #

不需要在getStaticProps中添加任何与自定义404相关的配置，fallback:false的配置已经足够让未定义路径返回404页面。

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