🤷‍♂️

next/font が何もしてないのに壊れた

2023/11/27に公開

Next.js

font

tech

ある朝突然、nextのビルドが途中でピタ…と止まるようになった。昨日からコード一行も変えてないのに。

1分ぐらいしたら以下のようなエラーが出て終了する。

FetchError: request to https://fonts.gstatic.com/s/notosansjp/v52/-F62fjtqLzI2JPCgQBnw7HFowwII2lcnk-AFfrgQrvWXpdFg3KXxAMsKMbdN.85.woff2 failed, reason: 
    at ClientRequest.<anonymous> (/path/to/project/node_modules/next/dist/compiled/node-fetch/index.js:1:65756)
    at ClientRequest.emit (node:events:514:28)
    at ClientRequest.emit (node:domain:488:12)
    at TLSSocket.socketErrorListener (node:_http_client:495:9)
    at TLSSocket.emit (node:events:514:28)
    at TLSSocket.emit (node:domain:488:12)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  type: 'system',
  errno: 'ETIMEDOUT',
  code: 'ETIMEDOUT'
}
Failed to compile.

src/app/[lang]/layout.tsx
`next/font` error:
Failed to fetch `Noto Sans JP` from Google Fonts.


> Build failed because of webpack errors
error Command failed with exit code 1.

ということで next/font で提供するためのGoogle Fontsのフォント(今回はNoto Sans JP)の取得時にタイムアウトしているらしい。でも該当のURLを開いてみると普通にwoff2ファイルがダウンロードできる。

色々やってみたけど結論だけ残しておくと、会社のWi-Fiじゃなくてスマホでテザリングして別の回線にPCを繋いだ状態でビルドしたら成功した。

つまり特定のネットワークから、ブラウザじゃなくてNextのビルド時にGoogle Fontsにリクエストした時にだけタイムアウトするような何かがある日突然起こるらしい。なんだそりゃー！という感じだ。多分Google Fonts側の問題なのでこちらからは手出しできない。

というわけで根本的な解決策は謎ですが、意外な理由だったので残しておきます。同じ状況に陥った人はとりあえずネットワーク変えてみてください。

追記

根本的な原因は謎のままで、さまざまな解決策が飛び交っている。ある解決策が他のユーザーには通用しないことが多い。VPNからアクセスすると弾かれるとか、フォントのダウンロードがタイムアウトしてるっぽいとか。

「Nodeのバージョンを変更するとなぜか直る」という回避策が挙げられており、手元の環境でもなぜか直ったのでとりあえずそれでなんとかしている。

追記

Discussion