Next.js 13.3升级后Vercel构建报错：AbortController is not defined

将Next.js从13.1.6升级至13.3版本后，使用next/font/google引入Inter字体，本地执行npm run build和npm run start均正常，但在Vercel上构建时出现报错：

ReferenceError: AbortController is not defined
    at fetchCSSFromGoogleFonts (/vercel/path0/node_modules/next/dist/compiled/@next/font/dist/google/fetch-css-from-google-fonts.js:34:28)
    at nextFontGoogleFontLoader (/vercel/path0/node_modules/next/dist/compiled/@next/font/dist/google/loader.js:76:79)
    at /vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:60:99
    at Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:79:26)
    at Object.nextFontLoader (/vercel/path0/node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js:13:31)
    at LOADER_EXECUTION (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4134)
    at runSyncOrAsync (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:4145)
    at iterateNormalLoaders (/vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5782)
    at /vercel/path0/node_modules/next/dist/compiled/loader-runner/LoaderRunner.js:1:5426
    at /vercel/path0/node_modules/next/dist/compiled/webpack/bundle5.js:28:395994
Failed to compile.
src/pages/_app.js
`next/font` error:
Failed to fetch `Inter` from Google Fonts.
> Build failed because of webpack errors
Error: Command "npm run build" exited with 1
Deployment completed
BUILD_UTILS_SPAWN_1: Command "npm run build" exited with 1

相关代码：

import { Inter } from "next/font/google"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

export default function MyApp({ Component, pageProps }) {
  return (
    <div className={`${inter.variable} font-sans`}>
      {renderWithLayout(<Component {...pageProps} />)}
    </div>
  )
}

注：代码中并未直接使用AbortController。

1. 调整Vercel的Node.js版本 #

AbortController是Node.js 15.0.0及以上版本才支持的API，Vercel默认构建环境的Node版本可能低于此要求：

• 进入Vercel项目的「Settings」→「Build & Development Settings」，将Node.js版本设置为16.x或更高（推荐18.x，符合Next.js 13官方要求）
• 或者在项目根目录创建.nvmrc文件，写入18，Vercel会自动识别并使用对应版本

2. 升级到Next.js 13.3最新补丁版 #

13.3初期版本可能存在字体加载相关的bug，升级到最新补丁版可修复部分异常：

npm install next@latest

3. 清除Vercel构建缓存 #

旧的构建缓存可能导致依赖异常，重新部署时选择「Clear build cache and redeploy」：

• 在Vercel的部署详情页，点击「Redeploy」按钮，勾选「Clear build cache」后重新部署

4. 显式指定字体权重（可选） #

部分场景下，未指定字体权重可能触发fetch异常，可根据需求添加weight配置：

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
  weight: ['400', '500', '700'] // 按需指定所需权重
})

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