グローバルスタイル

CSS Modules はコンポーネントレベルのスタイルに便利です。しかし、すべてのページで読み込まれるCSSが必要な場合、Next.jsはそれもサポートしています。

アプリケーションにグローバルCSSを読み込むには、pages/_app.jsというファイルを作成し、次の内容を記述します：

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

_app.jsのデフォルトエクスポートは、アプリケーション内のすべてのページをラップするトップレベルのReactコンポーネントです。このコンポーネントを使用して、ページ間のナビゲーション時に状態を保持したり、ここで行っているようにグローバルスタイルを追加したりできます。_app.jsファイルの詳細をご覧ください。

開発サーバーの再起動

重要: pages/_app.jsを追加したら、開発サーバーを再起動する必要があります。Ctrl + cでサーバーを停止し、次のコマンドを実行します：

npm run dev

グローバルCSSの追加

Next.jsでは、グローバルCSSファイルをpages/_app.jsからインポートすることで追加できます。グローバルCSSは他の場所ではインポートできません。

グローバルCSSがpages/_app.js以外でインポートできない理由は、グローバルCSSがページ上のすべての要素に影響を与えるためです。

ホームページから/posts/first-postページに移動すると、ホームページのグローバルスタイルが意図せず/posts/first-postに影響を与える可能性があります。

グローバルCSSファイルは任意の場所に配置でき、任意の名前を使用できます。次の手順で進めましょう：

• トップレベルにstylesディレクトリを作成し、global.cssファイルを追加します。
• styles/global.cssに次のCSSを追加します。このコードはいくつかのスタイルをリセットし、aタグの色を変更します：

html,
body {
  padding: 0;
  margin: 0;
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    Fira Sans,
    Droid Sans,
    Helvetica Neue,
    sans-serif;
  line-height: 1.6;
  font-size: 18px;
}
 
* {
  box-sizing: border-box;
}
 
a {
  color: #0070f3;
  text-decoration: none;
}
 
a:hover {
  text-decoration: underline;
}
 
img {
  max-width: 100%;
  display: block;
}

最後に、先ほど作成したpages/_app.jsファイル内でCSSファイルをインポートします：

// `pages/_app.js`
import '../styles/global.css';
 
export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

これで、http://localhost:3000/posts/first-postにアクセスすると、スタイルが適用されているのがわかります。_app.jsでインポートしたスタイルは、アプリケーションのすべてのページにグローバルに適用されます。

動作しない場合: pages/_app.jsを更新したら、開発サーバーを再起動してください。