🚀

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

2021/10/02に公開・約2,200字

Next.js

tech

この記事について

この記事は、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,
}