Next 14中not-found.tsx渲染空白问题求助

以下是针对性的排查和解决步骤：

• 确认Next.js版本符合要求
  not-found.tsx是App Router的特性，需要Next.js 13.4及以上版本。执行npm list next查看版本，低于13.4的话，运行npm install next@latest升级。

• 检查not-found.tsx的位置是否正确
  全局404页面需要放在src/app的根目录下，不能嵌套在路由组（比如(dashboard)）、动态路由段或者其他特殊文件夹内。确保路径是src/app/not-found.tsx，没有被错误放置。

• 排查中间件或路由重写的干扰
  检查项目中的middleware.ts文件，确认没有对未匹配路由做强制重定向或拦截，导致Next.js无法触发not-found组件。比如避免类似这样的逻辑：

  // 错误示例：拦截所有未匹配路由并跳转
  export function middleware(request: NextRequest) {
    if (!request.nextUrl.pathname.startsWith('/api')) {
      return NextResponse.redirect(new URL('/', request.url))
    }
  }
  

• 清理缓存并重新构建
  删除项目根目录下的.next文件夹，然后重启开发服务器（npm run dev）或者重新构建生产版本（npm run build && npm start），避免缓存导致的旧逻辑残留。

• 检查根layout.tsx的配置
  确认src/app/layout.tsx是标准的根布局结构，没有隐藏子内容的逻辑。比如根layout需要返回包含{children}的JSX：

  // 正确的根layout示例
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
    return (
      <html lang="en">
        <body>{children}</body>
      </html>
    )
  }
  

  如果layout里有条件渲染逻辑，确保未匹配路由时children能正常渲染。

• 禁用实验性配置（如果有）
  检查next.config.js，确认没有设置experimental.appDir: false（Next.js 13.4+默认启用App Router，不需要手动配置），如果有则删除该配置项。

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