はじめに

とあるクラファンプロジェクトのWebサイトをNext.jsで実装させていただきました。
サイトのデザイン上、Abobe Fontsを利用する必要があったのですが、どのようにNext.jsに導入したらいいのか少し悩んだのでこちらに対応方法を記載します。

対応方法

ReactのdangerouslySetInnerHTMLを利用して、

タグ内に記述することでAdobe FontをNext.jsのプロジェクトでも利用できます。

 
<Head>
  <script
    dangerouslySetInnerHTML={{
      __html: `
      .... // Adobe Fontのコードからコピー
        `}}
  />
</Head>

=>
これで、Adobe Fontsで設定したフォントが利用できるようになります。
(Adobe Fonts利用するにはAdobeでサブスクリプション契約をする必要があるので、その点のみご注意ください)

これまでGoogle FontsぐらいしかWebフォントを使ってこなかったのですが、Adobe Fontsのフォントを利用するとかなりおしゃれなサイトが作れるのだなと学べて、いい経験になりました。

今回の学びを生かして、Next.jsやGatzbyでおしゃれなサイト/アプリケーションを色々作っていきたいです！