CSS

例

基本的なCSS例

Next.jsは、以下を含む複数のCSS処理方法をサポートしています：

CSS Modules
グローバルスタイル
外部スタイルシート

CSS Modules

Next.jsは、.module.css拡張子を使用するCSS Modulesに組み込みでサポートしています。

CSS Modulesは、自動的に一意のクラス名を作成することで、CSSをローカルにスコープ化します。これにより、他のファイルで同じクラス名を使用する際に、名前の衝突を心配することなく使用できます。この動作により、CSS ModulesはコンポーネントレベルのCSSを含めるのに最適な方法となります。

例

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

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

Button.module.css

/*
他の`.css`や`.module.css`ファイルの`.error {}`と衝突することを心配する必要はありません！
*/
.error {
  color: white;
  background-color: red;
}

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

components/Button.js

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      // インポートされた`styles`オブジェクトのプロパティとして「error」クラスにアクセスしていることに注意してください。
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSS Modulesは、.module.cssと.module.sass拡張子を持つファイルでのみ有効です。

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

グローバルスタイル

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

例えば、styles.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します。

pages/_app.js

import '../styles.css'
 
// この既定のエクスポートは、新しい`pages/_app.js`ファイルで必要です。
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'
// ErrorBoundaryのCSSは、styles.cssのグローバルCSSに依存しているため、
// 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内でファイルをインポートする必要があります。例：

pages/_app.js

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

サードパーティコンポーネントに必要なCSSをインポートする場合、コンポーネント内でインポートできます。例：

components/example-dialog.js

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}>ダイアログを開く</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>閉じる</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>こんにちは。私はダイアログです。</p>
      </Dialog>
    </div>
  )
}

追加機能

Next.jsには、スタイル追加の作成体験を向上させるための追加機能が含まれています：

next devでローカル実行する際、ローカルスタイルシート（グローバルまたはCSSモジュール）はFast Refreshを活用し、編集を保存するとすぐに変更が反映されます。
next buildで本番向けにビルドする際、CSSファイルは少数の最小化された.cssファイルにバンドルされ、スタイル取得に必要なネットワークリクエストの数を削減します。
JavaScriptを無効にしても、本番ビルド（next start）では、スタイルは引き続きロードされます。ただし、Fast Refreshを有効にするにはnext devにJavaScriptが必要です。

CSS

CSS Modules

例

グローバルスタイル

外部スタイルシート

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

追加機能

`node_modules`からスタイルをインポート