グローバルスタイル

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では、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} />;
}

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

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