Next13新機能、@next/fontでフォント読み込みを高速化してみた

2023.9.21 記事の内容をリライトしました。この記事では、Pages Router プロジェクトに対してnext/fontsを導入する方法を紹介しています。AppRouterプロジェクトでnext/fontsを利用する場合は、公式Docsも合わせてご参照ください。 この記事でやること @next/fontの導入 @next/font導入前後でフォントファイルのリードタイムを比較 以上2点です（PagesRouter環境） ちなみに@next/fontはGoogleFontsとローカルフォントの2系統に対して使うことができるのですが、今回は両方試してみたいと思います。 実行環境 bun 1.0.2 node: v20.6.1 next: 13.5.1 react: 18.2.0 react-dom: 18.2.0 next/fontの概要 まずは@next/fontの概要についてざっく