🚀

【Next.js和訳】Basic Features/Font Optimization

2021.10.02に公開

Next.js

tech

この記事について

株式会社 UnReact はプロジェクトの一環としてNext.js ドキュメントの和訳を行っています。

この記事は、Basic Features/Font Optimization の記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

フォントの最適化

バージョン10.2以降、Next.jsにはWebフォントの最適化機能が組み込まれています。

デフォルトでは、Next.jsはビルド時に自動的にフォントのCSSをインライン化し、フォント宣言を取得するための余分なラウンドトリップを排除します。これにより、First Contentful Paint（FCP）とLargest Contentful Paint（LCP）が改善されます。例えば、以下のようになります。

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter"
  rel="stylesheet"
/>

// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal...
</style>

使い方

Next.jsアプリケーションにWebフォントを追加するには、next/headをオーバーライドします。たとえば、特定のページにフォントを追加することができます。

pages/index.js

import Head from 'next/head'
export default function IndexPage() {
  return (
    <div>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
          rel="stylesheet"
        />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

また、カスタムDocumentを使ってアプリケーション全体に適用することもできます。

pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
export default MyDocument

自動ウェブフォント最適化は、現在、Google FontsとTypekitに対応していますが、他のフォントプロバイダーにも対応する予定です。また、ローディングストラテジーやfont-display値の制御機能の追加も予定しています。
詳しくは「Googleフォント表示」をご覧ください。

最適化の無効化

Next.jsによるフォントの最適化を希望しない場合は、最適化を無効にすることができます。

next.config.js

module.exports = {
  optimizeFonts: false,
}