SSGのページでreact-fontawesomeのアイコンが一瞬でかく表示されてしまう

Next.jsアプリでアイコン表示の際にreact-fontawesomeを使っていたのだが、Vercel上でページを開くと一瞬だけアイコンがでかく表示されてしまう現象が発生した。

ローカル環境では発生せず、Vercelにデプロイした時のみ発生しているのでSSGが原因と考えられる。

調べてみるとissueも上がっており、[[@fortawesome/fontawesome-svg-core/styles.css]]をimportする必要があるとのこと。

ということで_app.tsxにimportを追加したところ、アイコンが正しく表示されるようになった。

// pages/_app.tsx
import '@fortawesome/fontawesome-svg-core/styles.css'
import '@/styles/index.css'

import { AppProps } from 'next/app'
import React from 'react'

function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return <Component {...pageProps} />
}

export default MyApp