Next.js で M PLUS Rounded 1c を使って、npm run dev するとエラーになる

問題の概要

Next.js で、Google Fonts の M PLUS Rounded 1c を使っていました。

App.tsx

import { M_PLUS_Rounded_1c } from "next/font/google";
const mplusrounded1c = M_PLUS_Rounded_1c({
  subsets: ["latin"],
  weight: ["100", "300", "400", "500", "700", "900"],
});

ローカルである日突然 npm run dev しようとしたときにエラーが発生しました。

> next dev

  ▲ Next.js 14.2.5
  - Local:        http://localhost:3000
  - Environments: .env.local, .env

 ✓ Starting...
 ✓ Ready in 1817ms
 ○ Compiling / ...
 ⨯ Failed to find font override values for font `M PLUS Rounded 1c`

日本語の（ちゃんとした）記事が少なく、ちょっと苦労したので、小学生のノートまとめ程度にまとめておきます。

原因

• Next.js は、@capsizecss/metrics を使っています
• @capsizecss/metrics 2.2.0 では、M PLUS Rounded 1c に対応していませんでした
  • 最新バージョンの 3.2.0 は対応しています
    
• Next.js の v14.2.6 以前は @capsizecss/metrics 2.2.0 を使用していましたが、v14.2.7 から 3.2.0 に変更されました （ 参考：github.com ）

結論

• Next.js をバージョンアップしよう
  • 難しい場合は、フォントの読み込み方法を検討してみてもいいかもしれません

感想

• capsizecss/metrics も色々できそうで気になったけど、眠気が勝ちました
• おやすみなさい🌙

参考（順不同）

• https://github.com/vercel/next.js/blame/canary/packages/next/package.json#L154
• https://www.npmjs.com/package/@capsizecss/metrics
• https://github.com/vercel/next.js/releases/tag/v14.3.0-canary.4
• https://kumatech-lab.com/nextjs-font-error

※ 全て、2024年9月1日参照