スタイリング

Next.js は、次のような CSS を処理するための複数の方法をサポートしています。

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

CSS Modules

Next.js には、.module.css 拡張子を使用した CSS Modules の組み込みサポートがあります。

CSS Modules は、一意のクラス名を自動的に作成することにより、CSS のスコープをローカルに設定します。これにより、衝突を心配することなく、異なるファイルで同じクラス名を使用できます。この動作により、CSS Modules はコンポーネントレベルの 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 Modules は、.module.css および .module.sass 拡張子を持つファイルでのみ有効になります。

本番環境では、すべての CSS Module ファイルが自動的に連結されて、多くの縮小されたコード分割された .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 ファイルを作成します。次に、import styles.css ファイル。

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ファイルは自動的に単一のminifyされた.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がimportの概念をJavaScriptを超えて拡張しているため可能です。

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ファイルは、スタイルを取得するために必要なネットワークリクエストの数を減らすために、より少ないminifyされた.cssファイルにバンドルされます。
• JavaScriptを無効にすると、スタイルは本番ビルド（next start）でもロードされます。ただし、next devでFast Refreshを有効にするには、JavaScriptが仍然として必要です。