Next.jsでグローバルに効かせるCSS（global.css）を作る方法

Next.jsでの開発で、アプリケーション全体にわたって共通のCSSを適用したいと考える方が多いでしょう。この記事では、Next.jsの公式サイトにも掲載されているグローバルCSSの設定方法について、具体的な手順を解説します。

グローバルCSSは、アプリケーション全体に適用されるCSSで、特定のページやコンポーネントに限定されず、全ての要素にスタイルを適用するのに便利です。ここでは主に以下の2点に焦点を当てて説明します。

参考：
Assets, Metadata, and CSS

必要な手順（まとめ）

• styles/global.cssにCSSを作成する
• pagesディレクトリの配下に「_app.js」というファイルを作成し、global.cssを読む

1) styles/global.cssにCSSを作成する

Next.jsプロジェクトにグローバルCSSを適用するには、まずCSSファイルを作成します。デフォルトのパスとしてstyles/global.cssが一般的ですが、この場所はプロジェクトに応じて変更可能です。

例えば、以下のようにCSSを定義しておきましょう。

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

/* その他のグローバルスタイル */

2) pagesディレクトリの配下に「_app.js」というファイルを作成し、global.cssを読む

Next.jsでは、pages/_app.jsファイルを使用してカスタムAppコンポーネントを定義し、全ページにわたってグローバルCSSを適用することができます。このファイルはNext.jsのルーターやページの初期化といった全体のアプリケーションの挙動を制御するための特別なファイルです。

以下のコードをpages/_app.jsに配置します。

import "../styles/global.css";

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

このコードにより、global.cssがプロジェクトの全ページで読み込まれ、統一されたスタイルが適用されます。重要なのは、この_app.jsファイルがすべてのページとコンポーネントの親となるため、ここで読み込むCSSはグローバルに適用される点です。

これで、Next.jsプロジェクトにグローバルスタイルを簡単に実装できます。