Next.js App Router路由处理器调用notFound()不显示404页面问题

可能的原因及解决步骤 #

1. 确认not-found.tsx的放置位置正确 #

在Next.js App Router中，not-found.tsx的位置决定了它的生效范围：

• 全局生效：将not-found.tsx放在项目根目录的app/文件夹下（app/not-found.tsx），所有路由的404都会触发这个页面。
• 局部生效：如果只想让某个路由段下的404使用特定页面，把not-found.tsx放在对应路由段的文件夹内，比如你的路由处理器在app/[statusId]/route.ts，就把not-found.tsx放在app/[statusId]/not-found.tsx。

2. 确保not-found.tsx组件格式正确 #

自定义404页面必须是标准React组件，返回合法JSX。示例代码：

// app/not-found.tsx
export default function NotFound() {
  return (
    <main className="flex flex-col items-center justify-center min-h-screen p-4">
      <h1 className="text-4xl font-bold mb-4">404 - 页面未找到</h1>
      <p className="text-lg">抱歉，你要找的推文不存在或已被删除。</p>
    </main>
  );
}

3. 升级Next.js到稳定版本 #

部分早期App Router版本（如13.0-13.3）存在notFound()兼容性问题，建议升级到13.4及以上稳定版，执行命令：

npm install next@latest
# 或
yarn add next@latest
pnpm add next@latest

4. 排除静态导出的影响 #

如果项目启用了静态导出（next.config.js中设置output: 'export'），需调整配置：

• 在next.config.js中添加trailingSlash: true，确保静态文件路径正确。
• 动态路由需通过generateStaticParams预生成可能的路由，或确保静态导出能正确处理404场景。

5. 验证notFound()的调用逻辑 #

确认queryClient返回的status确实为404，避免因状态码判断错误导致未触发notFound()。你的现有代码逻辑本身是正确的，notFound()会抛出终止执行的错误，无需额外后续代码。

内容的提问来源于stack exchange，提问作者Dev-Siri