😽

Next.js の Production Build で Fontawesome が表示されない問題の解決方法

2023/03/01に公開

Next.js

Font Awesome

tech

Next.js のプロジェクトで Fontawesome を使いたい。

そう思って利用してみたところ、Production Build で表示が消えてしまう問題が発生しました。

検索してすぐに出てくる内容だけでは解決しなかったので、対策を共有します。

よく紹介される利用方法

Fontawesome を使いたいと思って調べてみると、だいたい以下のような説明が見つかると思います。

まずは必要なパッケージをインストール

yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome@latest

そして、コンポーネント内で以下のように使用する

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFaceRelieved } from '@fortawesome/pro-solid-svg-icons'

export default function IconSample() {
  return (
    <div>
      <FontAwesomeIcon icon={faFaceRelieved} />
    </div>
  )
}

これだけで高品質なアイコンが使えるようになる非常に便利なサービス、最高ですね。

しかし上記のやり方だと、ローカル環境で開発している分には問題ないが、ビルドするとアイコンが消えてしまう問題が発生しました。

対応方法を調べたので紹介します。

Next.js では追加の設定が必要

先に述べたように、Next.js で Fontawesome を利用すると、Production Build ではアイコン表示が消えてしまう。

Stack overflow にある似たような事例で、以下の公式ドキュメントが紹介されていた

それによると React で利用する場合は、事前に css をインポートしたり、設定を変更する必要があるそうです。

その上で Next.js の場合は、さらに /pages/_app.js に以下を追記

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

この設定を追加後は Production Build でもアイコンが表示されるようになりました

設定変更の意味

config.autoAddCss は fontawesom-svg-core ライブラリがアイコン用の css を自動で <head /> に追加するか制御するフラグです。

これを false にして、自動追加を無効化しています。

なぜこんなことをしているのか、ドキュメントの説明では以下のようにあります。

Next.js blocks this from happening anyway so you might as well not even try.

ざっくり訳せば、 Next.js では css の自動追加はブロックされるので無効化しておきましょう、とのことです。

このことから css が自動で追加できないから、アイコンが表示されていなかったということがわかりますね。

次に自動追加を無効化した上で css を手動で import しています。

import '@fortawesome/fontawesome-svg-core/styles.css'

手動で css を追加することで、ブロックされることなく正常に表示可能になったことがわかりました。

おまけ: ChatGPT に聞いてみた

気になったので ChatGPT にも聞いてみました。

質問

Next.js の Production Build で Fontawesome のアイコンが表示されません。

回答

Next.jsのProduction BuildでFontawesomeのアイコンが表示されない場合、いくつかの原因が考えられます。以下にいくつかの可能性を挙げますので、参考にしてください。
フォントが正しくロードされていない可能性があります。Fontawesomeのアイコンには、特定のフォントが必要です。このフォントがロードされていない場合、アイコンが正しく表示されません。フォントをロードするために、以下のようにFontawesomeのCDNをhead要素に追加する必要があります。
<head>
  <script src="https://kit.fontawesome.com/your-fontawesome-kit.js" crossorigin="anonymous"></script>
</head>
Next.jsのProduction Buildでは、Webpackがコードを最適化するために、CSSファイルのURLを変更することがあります。これにより、フォントが正しくロードされないことがあります。この問題を解決するには、CSSファイル内のFontawesomeのフォントのURLを絶対パスに変更する必要があります。

フォントのロードに失敗している可能性があります。これは、ネットワーク接続の問題によるものか、Fontawesomeのサーバーに問題がある可能性があります。この場合、しばらく待ってから再度試してみるか、別のFontawesomeのCDNを試すことができます。
これらの解決策が役立たない場合は、Fontawesomeの公式ドキュメントやNext.jsのドキュメントを参照することをお勧めします。また、コードの問題がある場合は、質問に該当するコードの一部を提供していただくと、より具体的なアドバイスができます。

質問が曖昧すぎたのか、一発でクリティカルな回答は得られませんでした。

この後いくつか状況説明を繰り返したら、今回紹介した解決策である CSS の手動追加を試す方法を紹介されました。

ChatGPT はやっぱりすごい。

GitHubで編集を提案

よく紹介される利用方法

Next.js では追加の設定が必要

設定変更の意味

おまけ: ChatGPT に聞いてみた

質問

回答

Discussion