Next.js调用fetch报TypeError: Failed to fetch问题排查

• 函数导出位置/作用域错误：getStaticProps 必须在pages目录下的页面级文件（符合路由约定的.js/.jsx/.ts/.tsx文件）顶层做具名导出，Next.js才能识别执行。如果把它写在普通公共组件、非页面文件里，或是写在组件函数/其他自定义函数的作用域内，甚至是Next.js 13+默认的App Router模式下的页面里，该函数都不会被触发，自然不会发起请求、也不会产生任何日志。
• 日志查看位置错误：getStaticProps仅在Node.js服务端运行（开发阶段在本地启动服务的终端执行，生产构建阶段在build进程执行），它的所有console输出只会出现在运行Next.js进程的终端窗口，不会打印到浏览器的开发者工具控制台。如果一直在浏览器控制台找输出，会误以为函数没有执行。
• 请求静默失败无捕获：现有代码没有任何异常处理逻辑，两类问题会导致代码卡住或直接中断，且没有预期的日志输出：
  1. 网络层错误：比如服务端网络不通、接口域名解析失败、被防火墙/代理拦截、请求超时，这类问题会让fetch直接抛出异常，如果没有捕获，Next.js可能吞掉未处理的异常日志，表现为无返回；
  2. HTTP错误：fetch本身不会对4xx/5xx的HTTP状态码抛错，如果接口返回限流、报错响应，后续执行res.json()可能因为返回格式不是合法JSON直接报错中断。
     可以给代码加异常捕获和状态码判断，定位具体错误，参考代码：

  export const getStaticProps = async () => {
    try {
      const res = await fetch('https://api.jikan.moe/v4/top/manga');
      if (!res.ok) throw new Error(`请求异常，状态码：${res.status}`)
      const data = await res.json();
      console.log('data >>>', data);
      return {
        props: {
          manga: data,
        },
      };
    } catch (err) {
      console.log('getStaticProps执行报错：', err)
      return {
        props: {
          manga: null,
          errMsg: err.message
        }
      }
    }
  };
  

• 路由未被正确识别：如果页面文件命名不符合Next.js路由约定，比如放在pages目录的特殊系统文件中（如_app.js、_document.js、_error.js）、文件名后缀不在next.config.js的pageExtensions配置范围内、文件被路由排除规则过滤，对应页面的getStaticProps不会被注册执行。
• 请求被拦截或挂起：如果项目配置了服务端全局请求代理、出站请求拦截规则，或是目标接口触发了限流、WAF拦截（比如服务端IP短时间请求过多被封禁、请求头缺少合法User-Agent被拦截），会导致fetch请求长时间挂起无响应，代码不会走到后续的日志打印和props返回逻辑。

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