🚀
【Next.js和訳】Basic Features/Font Optimization
この記事について
この記事は、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,
}
関連
次に何をすべきかについては、以下のセクションをお勧めします。
Discussion