Next.js 10.0.6在Vercel部署触发TOO_MANY_FILESYSTEM_CHECKS 502错误

• Next.js 10.0.6版本存在rewrite逻辑的已知缺陷：在Vercel平台部署时，如果rewrite的destination配置使用了环境变量插值指向外部API，Vercel的路由检测逻辑会误将该路径判定为本地静态资源路径，反复触发文件系统读取校验，校验次数超过平台阈值后就会抛出TOO_MANY_FILESYSTEM_CHECKS 502错误。本地开发环境没有Vercel的文件系统访问次数限制，因此运行正常。
• Next.js 11.0.1版本官方修复了该缺陷：rewrite逻辑新增了外部域名自动识别能力，只要destination指向的是外部域名，就不会触发本地文件系统校验流程，因此相同代码在高版本可以正常运行。

方案1：升级Next.js版本（最简便） #

直接将项目的Next.js依赖升级到11.0.1及以上版本，无需修改现有配置和业务代码即可解决问题。

方案2：修改rewrite配置（适合暂时无法升级版本的场景） #

将rewrite的destination中的环境变量插值改为硬编码的外部API完整地址，避免Vercel部署阶段的路径误判，修改后的next.config.js示例：

module.exports = {
  reactStrictMode: true,
  async rewrites() {
    return [
      {
        source: '/my-api/:path*',
        destination: 'https://你的实际API域名/:path*',
      },
    ]
  },
}

方案3：改用API路由代理转发（适合需要保留环境变量配置的场景） #

放弃rewrite方案，通过Next.js原生API路由实现代理，不会触发文件系统校验问题：

1. 新建pages/api/my-api/[...path].js文件，代码如下：

export default async function proxyHandler(req, res) {
  const { path } = req.query
  const targetUrl = `${process.env.NEXT_PUBLIC_API_URL}/${path.join('/')}`

  const proxyRes = await fetch(targetUrl, {
    method: req.method,
    headers: {
      ...req.headers,
      host: new URL(process.env.NEXT_PUBLIC_API_URL).host
    },
    body: req.method !== 'GET' && req.method !== 'HEAD' ? req.body : undefined
  })

  const data = await proxyRes.json()
  res.status(proxyRes.status).json(data)
}

2. 修改GraphQLClient的初始化配置，将请求路径改为API路由地址：

import {GraphQLClient} from "graphql-request"
// ...
export default new GraphQLClient("/api/my-api/graphql")

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