Font Awesome Loading Error

您看到的「閃現放大的黑色圖示」問題，幾乎可以肯定是 Font Awesome 圖標載入 時的常見現象，有時被稱為 FOUI (Flash of Unstyled Icons) 或 FOIT (Flash of Invisible Text/Icons)。

發生原因：

1. JavaScript 渲染： 您使用的 react-fontawesome 套件會在頁面載入後，透過 JavaScript 將您指定的圖標轉換成 SVG 圖形並插入到頁面中。
2. CSS 與時序：
   • 在 JavaScript 成功將 SVG 插入之前，頁面上可能只是一個空的 <span> 或 <i> 佔位符。
   • 如果 Font Awesome 的核心 CSS 檔案載入得比較晚，或者瀏覽器先渲染了 HTML 和其他 CSS，這個佔位符可能會短暫地繼承了周圍元素或其他全局 CSS 的樣式（例如很大的 font-size 和預設的 color: black），導致您看到一個放大的黑色方塊或圖標輪廓。
   • 一旦 Font Awesome 的 JavaScript 和 CSS 都準備就緒，它會用正確的 SVG 圖標替換佔位符，並應用正確的樣式，黑色圖示就消失了。

如何解決：

最推薦的解決方法是遵循 Font Awesome 官方對 Next.js/React 應用的建議，在 _app.js 中手動配置和載入 CSS，避免它自動處理時可能出現的延遲或衝突。

請修改 pages/_app.js 如下：

import React from 'react'
import { createGlobalStyle } from 'styled-components'
// 1. 導入 Font Awesome config 和 core styles
import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'

// 2. 告訴 Font Awesome 不要自動添加 CSS，因為我們手動導入了
config.autoAddCss = false

const GlobalStyle = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: #fff; // 或您原本的背景色
  }

  /* 您可以保留或移除頁面過渡動畫樣式 */
  .page-transition-enter {
    opacity: 0;
  }
  .page-transition-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
  }
  .page-transition-exit {
    opacity: 1;
  }
  .page-transition-exit-active {
    opacity: 0;
    transition: opacity 300ms ease-out;
  }
`

function MyApp({ Component, pageProps }) {
  return (
    <>
      <GlobalStyle />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

主要變更：

1. 導入了 @fortawesome/fontawesome-svg-core 的 config。
2. 導入了 Font Awesome 的核心 CSS (@fortawesome/fontawesome-svg-core/styles.css)。
3. 設置 config.autoAddCss = false; 來阻止 Font Awesome 在稍後自動注入 CSS，確保 CSS 在頁面渲染早期就被應用。

解釋：

這樣做可以確保 Font Awesome 圖標所需的基礎 CSS 在頁面渲染的最開始階段就被載入和應用，而不是等到 JavaScript 執行後才動態添加。這能有效地防止佔位符元素短暫地顯示為錯誤樣式（如放大的黑色圖示）。

請應用此修改，然後重新啟動開發伺服器 (npm run dev) 並清除瀏覽器快取。這個閃現的黑色圖示問題應該就會解決了。