︙

CSS Modules

Next.js は、.module.css拡弽子を使用した CSS Modules の組み込みサポートを持っています。

CSS Modules は、ユニークなクラス名を自動的に作成することで、scope CSS をローカルにします。これにより、衝突を心配することなく、異なるファイルで同じクラス名を使用することができます。この振る舞いは、CSS Modules を Component レベルの CSS を含める理想的な方法にしています。

Example

CSS Modules は、appディレクトリ内の任意のファイルにインポートできます：

app/dashboard/layout.tsx

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

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

app/dashboard/layout.js

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 Modules は、オプション機能であり、.module.css拡張子を持つファイルのみ有効になります。通常の<link>スタイルシートとグローバルな CSS ファイルも引き続きサポートされています。

production では、すべての CSS モジュールファイルが自動的に多くの圧縮され、コード分割された .cssファイルに結合されます。これらの.cssファイルは、あなたのアプリケーションの中で熱い実行 paths を表し、アプリケーションの描画に必要な CSS が最小限になるように保証します。

Global Styles

グローバルの styles は、app ディレクトリ内の任意の layout、ページ、または component にインポートすることができます。

Good to know: これは、pagesディレクトリとは異なり、グローバルな styles を_app.jsファイル内でのみ import できるということです。

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

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

root layout ( app/layout.js )の中に、 import を使って global.css スタイルシートをインポートし、アプリケーション内の全ての route に styles を適用します:

app/layout.tsx

// These styles apply to every route in the application
import './global.css'

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

app/layout.js

// These styles apply to every route in the application
import './global.css'

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

External Stylesheets

外部パッケージによって公開されたスタイルシートは、appディレクトリのどこでも、コロケーションされた Component を含むものでも、インポートすることができます：

app/layout.tsx

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

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

app/layout.js

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

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

Good to know: 外部のスタイルシートは、 npm パッケージから直接インポートするか、ダウンロードしてコードベースと共に配置する必要があります。<link rel="stylesheet" />を使用することはできません。

Additional Features

Next.js は、 styles を追加するための作成体験を改善する追加機能を含んでいます：

next devを使ってローコールで実行する場合、ローカルのスタイルシート(グローバルか CSS modules のいずれか)はFast Refreshを利用して、編集が保存されるとすぐに変更が反映されます。
next build で production の number を行うとき、 CSS ファイルは、より少ない .css ファイルにまとめて縮小され、 styles を取得するために必要なネットワーク要求の数を減らします。
JavaScript を無効にすると、 production build (next start)でも styles は読み込まれます。しかし、Fast Refreshを有効にするためには、next dev では依然として JavaScript が必要です。