❔

next/font Failed to download

2024/08/08に公開1件

npm run dev実行時に、next/fontでfontの取得ができていない。
最後のほうにまとめている参考を覗くと様々な解決策があるが、完全な解決はされていないよう。
ひとまずnpm run devで実行されるscriptをnext dev --turboにすることで動作はしたが、npm run buildでは対応できないので問題は継続中。

環境

Next.js 14.2.5
WSLを使用

エラー内容

実装

公式の例に従って、おおよそ以下のように記述。

// app/fonts.ts
import { Inter } from 'next/font/google'

export const inter = Inter({ subsets: ['latin'] })

// app/layout.tsx
import { inter } from './fonts'

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="ja">
      <body className={`${inter.className}`}>
        {中略}
      </body>
    </html>
  )
}

エラー(一部抜粋)

AbortError: The user aborted a request.
    at abort (/User/project/node_modules/next/dist/compiled/node-fetch/index.js:1:65594)
    at AbortSignal.abortAndFinalize (/User/project/node_modules/next/dist/compiled/node-fetch/index.js:1:65814)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:816:20)
    at AbortSignal.dispatchEvent (node:internal/event_target:751:26)
    at abortSignal (node:internal/abort_controller:374:10)
    at AbortController.abort (node:internal/abort_controller:396:5)
    at Timeout.<anonymous> (/User/project/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:26:55)
    at listOnTimeout (node:internal/timers:581:17)
    at process.processTimers (node:internal/timers:519:7) {
  type: 'aborted'
}
 ⨯ Failed to download `Inter` from Google Fonts. Using fallback font instead.

Failed to fetch `Inter` from Google Fonts.}
AbortError: The user aborted a request.
    at abort (/User/project/node_modules/next/dist/compiled/node-fetch/index.js:1:65594)
    at AbortSignal.abortAndFinalize (/User/project/node_modules/next/dist/compiled/node-fetch/index.js:1:65814)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:816:20)
    at AbortSignal.dispatchEvent (node:internal/event_target:751:26)
    at abortSignal (node:internal/abort_controller:374:10)
    at AbortController.abort (node:internal/abort_controller:396:5)
    at Timeout.<anonymous> (/User/project/node_modules/next/dist/compiled/@next/font/dist/google/fetch-font-file.js:26:55)
    at listOnTimeout (node:internal/timers:581:17)
    at process.processTimers (node:internal/timers:519:7) {
  type: 'aborted'
}

暫定的な解決

// package.json
  "scripts": {
    "dev": "next dev --turbo",
  },

これでnpm run dev実行時には問題がなく、後に同環境でnpm run buildする場合にも問題はない。ただし、.nextディレクトリ削除後にnpm run buildを実行するとエラーが生じるので、当然問題は継続している。

TurbopackのDocs

参考

Discussion

LaPh

私も以前これに悩まされていました。
正直どうしようもないのかなと(next/fontが恐らくかなり無理やりな実装をしてるのかなと思っています。)

なので、諦めてAstroやRemixなどで使われている、fontsourceを使うようにしました。
多少next/fontよりは最適化で劣るとは思いますが、それでも開発に影響は出ないですし、似たようなライブラリなのでそのまま使っています。