Next.jsでFontAwesomeを使うときにエラーになる

Next.jsでFont Awesomeを使うときに、アイコンが一瞬大きく表示される。
Font AwesomeのCSSが遅れて読み込まれることが原因。
解決するためには設定が必要だがそのコードを検索して書いたらエラーになった。

今回起こったこと

/pages/_app.jsに下記のコードを追加したがエラーになった。

_app.js

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

Nextのバージョンは以下の通り。

package.json

"dependencies": {
    "next": "13.4.2",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  }

解決策

Fontawesomeのトラブルシューティングによると、Next.js の新しいバージョンでは、このエラーが発生する可能性があるようだった。
2行目の@fortawesome/fontawesome-svg-core/styles.cssのインポート方法を変更することで解決。

_app.js

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

これでエラーが解決された。