Menu

CSS

例

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

CSSモジュール

Next.jsは.module.css拡張子を使用したCSSモジュールを組み込みでサポートしています。

CSSモジュールは自動的に一意のクラス名を生成することでCSSをローカルにスコープします。これにより、異なるファイルで同じクラス名を使用しても衝突の心配がありません。この特性により、CSSモジュールはコンポーネントレベルの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"
      // "error"クラスはインポートした`styles`オブジェクトのプロパティとして
      // アクセスされていることに注目してください。
      className={styles.error}
    >
      Destroy
    </button>
  )
}

CSSモジュールは**.module.cssと.module.sass拡張子を持つファイルでのみ有効**です。

本番環境では、すべてのCSSモジュールファイルが自動的に多数の最小化されコード分割された.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内でのみインポートすることができます。

開発中、この方法でスタイルシートを表現すると、編集内容が保存されるとスタイルが即座に反映されるFast Refreshを活用できます。つまり、アプリケーションの状態を維持したままスタイルを変更できます。

本番ビルド（next build）では、すべての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}>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が必要です。