Next.js NotFound页面每隔约3秒自动刷新问题求助

问题描述 #

我按照Next.js官方文档实现了NotFound页面，网站其他功能均正常，但该页面每隔约3秒会自动刷新。以下是我的NotFound页面代码：

import Link from "next/link";

export default function NotFound() {
  return (
    <div className="overflow-hidden bg-white text-black md:py-20">
      <div className="container relative mx-auto px-4">
        <div className="grid grid-cols-1 items-center px-4 py-20 xl:py-10">
          <div>
            <h2 className="relative z-10 text-center text-6xl font-bold xl:text-9xl">
              Oops! <br /> Page Not Found
            </h2>
            <span className="absolute left-0 top-0 w-full transform whitespace-nowrap text-[250px] font-extrabold text-gray-400 opacity-40 blur-[2px] md:-left-[5%] xl:text-[300px]">
              ERROR 404
            </span>
            <p className="mx-auto text-center text-base md:p-4 xl:w-2/3 xl:text-xl">
              Don&apos;t worry, though! Our team of skilled developers is
              constantly working to enhance your browsing experience. In the
              meantime, feel free to explore our other amazing content and
              discover exciting insights.
              <br />
              If you believe you&apos;ve reached this page in error, please
              double-check the URL or use the navigation links to find your way
              back to our website&apos;s main sections.
            </p>
          </div>
        </div>
      </div>
    </div>
  );
}

可能原因与解决步骤 #

1. 检查文件命名与位置 #

确保NotFound页面文件命名为not-found.tsx（或.jsx），并且放置在app目录的根层级（全局404）或对应路由段的目录下（子路由404）。错误的命名或位置会导致Next.js无法正确识别页面，引发异常行为。

2. 排查全局布局/父组件逻辑 #

检查根布局（app/layout.tsx）或对应路由的布局组件中是否存在以下可能导致刷新的代码：

• 未清理的setInterval/setTimeout定时器
• 数据获取逻辑（如fetch）出现错误后自动重试
• useState/useEffect的依赖项设置错误导致的无限更新循环

3. 禁用浏览器扩展 #

暂时关闭所有浏览器扩展（如广告拦截、页面监控类工具），验证是否是扩展干扰导致的自动刷新。部分扩展会修改页面DOM或触发页面重载。

4. 验证生产环境 #

运行以下命令构建并启动生产环境服务，检查问题是否存在：

npm run build
npm start

开发模式下的热重载机制偶尔会出现异常，但生产环境不会有此类问题，可借此区分是开发工具问题还是代码逻辑问题。

5. 检查控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否有未捕获的JavaScript错误。即使组件视觉上正常，隐性的DOM操作错误、CSS类名问题也可能触发React的重复渲染。

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