グローバルスタイル

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のインポートはできません。

グローバル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を更新した際は、開発サーバーを再起動したことを確認してください。