概要
Next.jsビルド時にTypeError: Cannot read properties of null (reading '1')のようなエラーがnext/fontで発生することがあり、原因について少し調べましたのでメモ書きします。
前提
- 使用したNext.jsのバージョンは
16.3.6です。
原因など
next/font/google: build fails when Google Fonts returns extensionless /l/font?kit= URLs #99114のIssueにある通り、Google Fontsから拡張子なしのURLがレスポンスで返ってきた場合に発生します。絶対に発生するという類のものではなく、Google Fontsからのレスポンスによって発生するものとなります。
Issueには再現が確認できたバージョン（16.3.6 and 16.2.12）が記載されてますが、どのバージョンから発生するかまでは記載は無いようでした。
next/fontの代替
たまにしか発生しないようなのでそのままでもいいのですが、いつ修正されるかも分からず不安定な状態ではあるので、取り急ぎnext/fontの代替の方法を記載します。
1. クライアント側でフォントを取得
Google Fontsの使い方にある通り、headもしくはcssでフォントのURLを設定し、クライアント側でフォントを取得する方法は挙げられます。
ただ、この方法の場合はnext/fontとは異なりビルド時にフォントが含まれず、クライアント側で取得する分読み込みのパフォーマンスが遅くなる懸念はあります。
2. Fontsourceを使用する
Fontsourceを使ってReactでfont導入してみたで紹介されているFontsourceを、next/fontの代わりに使用します。introductionのドキュメントで紹介されている通り、npm install時にフォントファイルが配置されるため、ビルド時にGoogle Fontsへのアクセスせずそのレスポンスにも左右されません。
個人的にはFontsourceを使う方法が、next/fontの代替として良いかなと考えています。