Next.js で Google font コンポーネントを作る

要約
Next.js で Google Fonts を利用したコンポーネントを作成する方法を紹介します。このコンポーネントは、指定したフォントを使用しつつ、追加のクラス名でカスタマイズが可能です。
意見はこのエリアに表示されます

Google font コンポーネントを作成

以下のコードでは、Google Fonts から Roboto フォントを読み込み、FontRoboto コンポーネントを作成しています。className が指定されている場合、もともとのフォントクラスに追加される仕組みです。

呼び出し

このコンポーネントは、className を上書きすることで、追加のスタイリングを行うことができます。

まとめ

FontRoboto コンポーネントを使用することで、Google Fonts を簡単に取り入れることができます。また、className プロパティを使ってスタイルを追加することで、デザインの自由度が増します。

Explore More
関連記事はありません。
Trends