CSS

Next.jsは、以下を含む複数のCSSの取り扱い方法をサポートしています。

• CSSモジュール
• グローバルスタイル
• 外部スタイルシート

CSSモジュール

Next.jsは、.module.css拡張子を使用するCSSモジュールを内蔵でサポートしています。

CSSモジュールは、一意のクラス名を自動的に生成することでCSSをローカルスコープ化します。これにより、異なるファイルで同じクラス名を使用しても衝突を心配する必要がありません。この特性により、CSSモジュールはコンポーネントレベルのCSSを含めるのに理想的な方法となります。

例

例えば、components/フォルダ内の再利用可能なButtonコンポーネントを考えてみましょう。

まず、components/Button.module.cssを以下の内容で作成します。

/*
You do not need to worry about .error {} colliding with any other `.css` or
`.module.css` files!
*/
.error {
  color: white;
  background-color: red;
}

次に、上記のCSSファイルをインポートして使用するcomponents/Button.jsを作成します。

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // Note how the "error" class is accessed as a property on the imported
      // `styles` object.
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSSモジュールは、.module.cssおよび.module.sass拡張子を持つファイルに対してのみ有効になります。

本番環境では、すべてのCSSモジュールファイルは自動的にミニファイされ、コード分割された複数の .cssファイルに結合されます。これらの.cssファイルはアプリケーション内のホットな実行パスを表し、アプリケーションの描画に必要な最小限のCSSが読み込まれることを保証します。

グローバルスタイル

アプリケーションにスタイルシートを追加するには、pages/_app.js内でCSSファイルをインポートします。

例えば、styles.cssという名前の以下のスタイルシートを考えてみましょう。

body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

もし存在しない場合は、pages/_app.jsファイルを作成します。次に、styles.cssファイルをimportします。

import '../styles.css'
 
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

これらのスタイル (styles.css) は、アプリケーションのすべてのページとコンポーネントに適用されます。スタイルシートのグローバルな性質と衝突を避けるため、pages/_app.js内で**のみ**インポートできます。

開発環境では、この方法でスタイルシートを記述すると、編集時にスタイルがホットリロードされ、アプリケーションの状態を維持できます。

本番環境では、すべてのCSSファイルが自動的に結合され、1つのミニファイされた.cssファイルになります。CSSが結合される順序は、_app.jsファイルにCSSがインポートされる順序と一致します。独自のCSSを含むインポートされたJSモジュールには特に注意してください。JSモジュールのCSSは、インポートされたCSSファイルと同じ順序規則に従って結合されます。例:

import '../styles.css'
// The CSS in ErrorBoundary depends on the global CSS in styles.css,
// so we import it after styles.css.
import ErrorBoundary from '../components/ErrorBoundary'
 
export default function MyApp({ Component, pageProps }) {
  return (
    <ErrorBoundary>
      <Component {...pageProps} />
    </ErrorBoundary>
  )
}

外部スタイルシート

Next.jsでは、JavaScriptファイルからCSSファイルをインポートできます。これは、Next.jsがJavaScriptのimportの概念を拡張しているためです。

node_modulesからのスタイルインポート

Next.js 9.5.4以降、node_modulesからのCSSファイルのインポートは、アプリケーション内のどこからでも許可されています。

bootstrapやnprogressのようなグローバルスタイルシートの場合、pages/_app.js内でファイルをインポートする必要があります。例:

import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

サードパーティコンポーネントに必要なCSSをインポートするには、自身のコンポーネント内でそれを行うことができます。例:

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'
 
function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)
 
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</p>
      </Dialog>
    </div>
  )
}

その他の機能

Next.jsには、スタイル追加のオーサリング体験を向上させるための追加機能が含まれています。

• next devでローカル実行する場合、ローカルスタイルシート（グローバルスタイルまたはCSSモジュールのいずれか）はFast Refreshを利用して、編集が保存されるとすぐに変更を反映します。
• next buildで本番環境用にビルドする場合、CSSファイルは、スタイル取得に必要なネットワークリクエストの数を減らすために、より少ない数のミニファイされた.cssファイルにバンドルされます。
• JavaScriptを無効にしても、スタイルは本番ビルド (next start) でロードされます。ただし、Fast Refreshを有効にするためには、next devにはJavaScriptが必要です。