NextJS 13.1.6页面路由API Router是否支持Fetch API？

核心结论 #

Next.js的API路由不会自动提供Fetch API的兼容处理，而getServerSideProps和Middleware里的fetch是框架封装过的，所以部署后才会出现Node原生实验性fetch的警告和报错。

问题原因 #

• 本地开发时，Next.js的开发环境默认自带了fetch的兼容层，或者你的本地Node版本是18+（这个版本开始fetch成为稳定特性），所以没出现问题。
• 部署环境的Node版本可能低于18，此时Node的fetch还是实验性特性，不仅会弹出警告，还可能因为环境配置差异导致fetch failed错误。
• getServerSideProps和Middleware是Next.js专属的机制，框架在这些场景下自动处理了fetch的兼容，所以能正常工作，但API路由的handler是纯Node.js运行环境，没有这个封装。

解决方案 #

方案1：改用node-fetch包（推荐生产环境使用） #

这是最稳妥的兼容方案：

1. 安装依赖：

npm install node-fetch
# 或者用yarn
yarn add node-fetch

2. 在API路由文件里导入使用：

import fetch from 'node-fetch';

async function handler(req, res) {
    // ...
    const response = await fetch('https://backend-url.com');
    // ...后续处理逻辑
}

export default handler;

方案2：升级部署环境的Node版本到18+ #

如果不想额外安装依赖，可以把部署环境的Node版本升级到18或更高，这个版本开始Node的Fetch API已经是稳定特性，不会再出现实验性警告，也能正常运行fetch请求。

补充说明 #

Next.js官方文档里，API路由的运行环境是基于原生Node.js的，所以要遵循Node.js的API支持规则。而getServerSideProps这类数据获取方法属于框架封装的逻辑，框架内部做了fetch的兼容处理，这就是不同场景下表现不同的原因。

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