【Next.js】グローバルCSSとは

グローバルCSSとは

Next.jsのグローバルCSSは、アプリケーション全体に適用されるスタイルシートのことを指します。通常、これらのスタイルは全てのページで共通のスタイリングを行うために使用されます。

使用方法

Next.jsでは、グローバルCSSを適用する方法がいくつかあります：

1. グローバルCSSファイルの作成 : styles ディレクトリや任意のディレクトリに、.css もしくは .scss ファイルを作成し、そこにグローバルなスタイルを定義します。例えば、styles/global.css というファイルを作成し、次のようにグローバルなスタイルを定義します：

/* styles/global.css */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

/* その他のグローバルなスタイルを定義 */

2. _app.js ファイルでグローバルCSSをインポート : Next.jsの _app.js ファイルを使用して、グローバルCSSファイルをインポートし、アプリケーション全体に適用します。次のように _app.js ファイルでグローバルCSSをインポートします：

// pages/_app.js
import '../styles/global.css';

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

export default MyApp;

#まとめ
どちらの方法を選択するかは、アプリケーションの設定や好みによります。通常、大規模なアプリケーションでは、グローバルCSSファイルを作成して、それを _app.js でインポートする方法が一般的です。