Next.js 13 App目录路由不存在时无限重试请求的修复方法咨询

当访问不存在的路由时出现无限重试请求，大概率是混淆了error.tsx和not-found.tsx的用途，或者配置有误，按以下步骤排查：

• 别用error.tsx处理404场景
  error.tsx是用来捕获组件渲染过程中抛出的错误，不是专门处理路由不存在的404情况。Next.js 13 App目录下，处理不存在的路由必须用not-found.tsx。
  在app目录根目录创建not-found.tsx，示例代码：

  export default function NotFound() {
    return (
      <div className="flex h-screen items-center justify-center">
        <div className="text-center">
          <h1 className="text-4xl font-bold mb-4">404 - 页面不存在</h1>
          <p className="text-gray-600">请确认你输入的网址是否正确</p>
        </div>
      </div>
    );
  }
  

  这个文件不需要加'use client'，默认是服务器组件，路由不存在时会直接渲染，不会触发请求重试。

• 检查error.tsx的正确用法（如果是组件错误导致的重试）
  如果你是某个路由下的组件报错导致重试，要确保error.tsx放在对应路由段的目录下，并且必须声明为客户端组件：

  'use client';
  
  import { useEffect } from 'react';
  
  export default function Error({ error, reset }) {
    useEffect(() => {
      console.error('组件报错:', error);
    }, [error]);
  
    return (
      <div>
        <h2>页面出错了</h2>
        <button onClick={() => reset()}>重试加载</button>
      </div>
    );
  }
  

• 排查自定义逻辑导致的循环
  如果项目里有middleware.ts或者全局的fetch拦截逻辑，检查是否存在错误重定向、自动重试的规则，比如中间件误将不存在的路由重定向到自身，或者fetch请求失败后无限重试。可以暂时注释中间件代码，测试是否还会出现循环。

• 升级Next.js到最新稳定版
  早期Next.js 13版本（13.0-13.2）的App目录存在不少bug，包括404处理的问题，运行npm install next@latest升级后，很多这类问题会被修复。

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