グローバルスタイル

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} />;
}

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

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