結論から言うと、この問題の根本的な解決には至りませんでした。

一時的な対策として、Google Fontsからダウンロードしたttfファイルを読み込む方法で解決しました。

環境

• Next.js 14.2.8
• Node.js 20.15.0
• Windows 11
• Powershell

経緯

HTML/CSSで作成したシンプルなウェブサイトを複数ページ化するため、Next.jsフレームワークを導入しました。

その際、Google FontsのZen Kaku Gothic Antiqueをnext/fontを通じて使用しようとしたところ、次のようなエラーが発生しました。

AbortError: The user aborted a request.
    at abort (C:\Users\b1018\Desktop\yt2sailor-gitlab\tsunagaism\node_modules\next\dist\compiled\node-fetch\index.js:1:65594)
    at EventTarget.abortAndFinalize (C:\Users\b1018\Desktop\yt2sailor-gitlab\tsunagaism\node_modules\next\dist\compiled\node-fetch\index.js:1:65814)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:825:20)
    at EventTarget.dispatchEvent (node:internal/event_target:760:26)
    at abortSignal (node:internal/abort_controller:370:10)
    at AbortController.abort (node:internal/abort_controller:392:5)
    at Timeout.<anonymous> (C:\Users\b1018\Desktop\yt2sailor-gitlab\tsunagaism\node_modules\next\dist\compiled\@next\font\dist\google\fetch-font-file.js:26:55)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  type: 'aborted'
}

どうやら、ネットワーク上の問題でGoogle Fontsのフォントファイルの読み込みに失敗しているようです。

Next.jsで発生したこの問題については、GitHubのIssue #55734が立てられており、そこでは「Node.jsのバージョンを最新にしたら治った」「ブラウザのキャッシュをクリア、.next/ディレクトリを削除したら治った」「ネットワークを変えたら治った」など、さまざまな意見が飛び交っており、根本的な解決には至っていないようです。

解決策

next/fontを使用せずに、HeadタグやCSSファイルでフォントを読み込む方法や、キャッシュや.next/ディレクトリを削除する方法などを試しましたが、私の場合は解決しませんでした。

最終的に、ローカルにフォントファイル（.ttf）をダウンロードして読み込むことで、フォントを読み込むことに成功しました。

この問題は、appルーターに関連しているようなので、pages/を使用するという選択肢も考えられそうです。

参考