@next/font を使用して Next.js のフォントを最適化する方法

フォントがサイトのパフォーマンスを低下させていませんか? このパッケージを使用して、アプリケーションのフォントの読み込み時間を最適化します。

Next.js アプリケーションをより視覚的に魅力的にするために、カスタム フォントを使用することもできます。 カスタム フォントを使用すると、Web サイトの外観と操作性が大幅に向上しますが、適切に最適化されていない場合、サイトのパフォーマンスが低下する可能性もあります。 の@next/fontパッケージはこの問題の解決策です。

@next/font パッケージは、Next.js でのフォントの読み込みを最適化するシンプルかつ効率的な方法を提供し、ページの読み込み時間と全体的なパフォーマンスを向上させます。 この記事では、Next.js プロジェクトで @next/font を使用する方法について説明します。

インストールできます@next/fontターミナルで次のコマンドを実行してパッケージを作成します。

Yarn を使用している場合は、次のコマンドを実行してパッケージをインストールできます。

の@next/fontパッケージは Google フォントの使用を最適化します。 の@next/fontNext.js サーバー上で Google フォントを自動的に自己ホストするため、フォントを取得するためのリクエストが Google に送信されることはありません。

アプリケーションで Google フォントを使用するには、フォントを関数としてインポートします。@next/font/googleに_app.js内のファイルページディレクトリ：

上記のコード ブロックでは、次を使用して可変フォントを作成しました。ロボットフォント機能。 のサブセットプロパティはフォントをラテン文字のみにサブセットします。 別の言語を使用する場合は、フォントをその言語にサブセットできます。

フォントを定義するときに、フォント スタイルとともにフォントの太さを指定することもできます。

配列を使用して複数のフォントの太さとフォント スタイルを指定します。

例えば：

次に、コンポーネントをラップします。主要タグを作成し、フォントをクラスとして主要鬼ごっこ：

上記のコード ブロックを使用してアプリケーションをレンダリングすると、フォントがアプリケーション全体に適用されます。 あるいは、フォントを 1 つのページに適用することもできます。 これを行うには、特定のページにフォントを追加します。

そのようです：

の@next/fontパッケージは、ローカル フォントの使用も最適化します。 ローカルフォントを最適化する手法@next/fontこのパッケージは Google フォントの最適化に非常に似ていますが、微妙な違いがあります。

ローカル フォントを最適化するには、ローカルフォントによって提供される機能@next/fontパッケージ。 インポートするのは、ローカルフォントからの関数@next/font/local次に、Next.js アプリケーションでフォントを使用する前に、変数フォントを定義します。

そのようです：

可変フォントを定義します私のフォントを使用してローカルフォント関数。 のローカルフォント関数はオブジェクトを引数として受け取ります。 オブジェクトには 1 つのプロパティがあります。送信元、フォント ファイルのファイル パスに設定されます。WOFF2フォーマット「./my-font.woff2」。

1 つのフォント ファミリに対して複数のフォント ファイルを使用できます。 これを行うには、送信元property を、さまざまなフォントのオブジェクトとそのプロパティを含む配列に変換します。

例えば：

を使用するには、@next/font Tailwind CSS を含むパッケージを使用するには、CSS 変数を使用する必要があります。 これを行うには、Google またはローカル フォントを使用してフォントを定義し、CSS 変数名を指定する変数オプションを使用してフォントを読み込みます。

例えば：

上記のコード ブロックでは、フォントを作成しました。インター、変数を次のように設定します--font-inter 。 のクラス名main 要素の が font 変数に設定され、なしで済ませる 。 の内部変数クラスはインターページにフォントを追加し、なしで済ませるクラスはデフォルトのサンセリフフォントを適用します。

次に、CSS 変数を tailwind 構成ファイルに追加します。tailwind.config.cjs:

これで、なしで済ませるクラス。

@next/font パッケージは、Next.js でのフォントの読み込みを最適化する簡単かつ効果的な方法です。 このパッケージにより、カスタム フォントが効率的に読み込まれ、Web サイトのパフォーマンスとユーザー エクスペリエンスが向上します。 この記事では、@next/font パッケージをセットアップし、それを Next.js アプリケーションで利用する方法について説明します。 画像を最適化することで、サイトのパフォーマンスをさらに向上させることができます。

Nobleokafor は、プログラミング分野で 3 年以上の経験を持つ熟練したソフトウェア エンジニアです。 彼は、最適化された JavaScript、ネイティブおよびクロスプラットフォームのモバイルおよび Web ソフトウェア ソリューションを構築することに情熱を持っています。 彼は 1 年以上の執筆経験を持つ技術記事を通じて、自身の知識と教訓を文書化するよう努めています。 これらの記事の主な焦点と目的は、ソフトウェア エンジニアリングのトピックに関する複雑さを単純化することです。