CSS モジュール

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

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

例

CSS モジュールは app ディレクトリ内の任意のファイルにインポートできます:

import styles from './styles.module.css'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>
}

import styles from './styles.module.css'

export default function DashboardLayout({ children }) {
  return <section className={styles.dashboard}>{children}</section>
}

app/dashboard/styles.module.css

.dashboard {
  padding: 24px;
}

CSS モジュールはオプション機能であり、.module.css 拡張子を持つファイルに対してのみ有効です。通常の <link> スタイルシートやグローバル CSS ファイルも引き続きサポートされています。

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

グローバルスタイル

グローバルスタイルは app ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。

知っておくと良い: これは pages ディレクトリとは異なり、pages では _app.js ファイル内でのみグローバルスタイルをインポートできます。

例えば、app/global.css という名前のスタイルシートを考えてみましょう:

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

ルートレイアウト (app/layout.js) 内で global.css スタイルシートをインポートすると、アプリケーションのすべてのルートにスタイルが適用されます:

// これらのスタイルはアプリケーションのすべてのルートに適用されます
import './global.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

// これらのスタイルはアプリケーションのすべてのルートに適用されます
import './global.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

外部スタイルシート

外部パッケージによって公開されているスタイルシートは、app ディレクトリ内の任意の場所（コンポーネントと同じ場所に配置されたファイルも含む）にインポートできます:

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

import 'bootstrap/dist/css/bootstrap.css'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className="container">{children}</body>
    </html>
  )
}

知っておくと良い: 外部スタイルシートは npm パッケージから直接インポートするか、ダウンロードしてコードベースと同じ場所に配置する必要があります。<link rel="stylesheet" /> は使用できません。

追加機能

Next.js には、スタイルの追加を改善するための追加機能が含まれています:

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

例

グローバルスタイル

外部スタイルシート

追加機能

On this page