Next.js 13.4.4 App Router下not-found.tsx无限刷新问题求助

可能的原因及修复方案 #

1. 路由重定向逻辑冲突 #

检查项目中的middleware.ts或路由配置，是否存在错误的重定向规则——比如将不存在的路由循环重定向到某个路径，导致触发not-found后又被重新定向，形成无限刷新的循环。

• 修复：排查重定向逻辑，确保对不存在的路由没有循环重定向规则，避免404页面被再次导向会触发404的路径。

2. 全局组件的错误导航逻辑 #

检查layout.tsx等顶层全局组件，是否有在useEffect中执行router.push这类自动导航的代码。如果该逻辑没有排除404页面场景，会导致进入not-found后重复触发导航，引发无限刷新。

• 修复：在导航逻辑中添加路径判断，避免在404页面执行导航操作。示例代码：

'use client';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
  const router = useRouter();
  const pathname = usePathname();

  useEffect(() => {
    // 排除404页面，避免触发重复导航
    if (pathname !== '/not-found' && /* 你的其他业务条件 */) {
      // 这里放置你的导航逻辑
    }
  }, [pathname, router]);

  return <html><body>{children}</body></html>;
}

3. Next.js版本已知Bug #

Next.js 13.4.x部分版本存在App Router下not-found组件的刷新异常问题，13.4.4属于可能受影响的版本范围。

• 修复：升级Next.js至最新稳定版本（如13.4.19及以上），官方后续版本已修复这类路由相关Bug。执行升级命令：

npm install next@latest
# 或使用yarn
yarn add next@latest

4. 开发环境缓存问题 #

开发环境中，服务器或浏览器缓存可能导致路由判断异常，触发无限刷新。

• 修复：
  • 停止开发服务器，删除项目根目录下的.next文件夹以及node_modules/.cache目录；
  • 重新启动开发服务器：npm run dev或yarn dev；
  • 在浏览器中强制刷新页面（Ctrl+F5），清除浏览器缓存。

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