CSS

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

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

CSS モジュール

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

CSS モジュールは、一意のクラス名を自動的に作成することで CSS のスコープをローカルに設定します。これにより、競合を心配することなく、異なるファイルで同じクラス名を使用できます。この動作により、CSS モジュールはコンポーネントレベルの CSS を含めるための理想的な方法となります。

例

CSS モジュールは、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/styles.module.css

.dashboard {
  padding: 24px;
}

CSS モジュールは、.module.css および .module.sass 拡張子を持つファイルでのみ有効になります。

本番環境では、すべての CSS モジュールファイルは自動的に連結され、多数のミニファイおよびコード分割された .css ファイルに変換されます。これらの .css ファイルは、アプリケーション内のホット実行パスを表し、アプリケーションが描画するためにロードされる CSS の量を最小限に抑えます。

グローバルスタイル

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

知っておくと良いこと:

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

Next.js は、実際にグローバルである場合を除き、グローバルスタイルの使用をサポートしていません。つまり、すべてのページに適用でき、アプリケーションの有効期間中存在できます。これは、Next.js が React の組み込みスタイルシートのサポートを使用して Suspense と統合しているためです。この組み込みサポートでは、ルート間を移動するときにスタイルシートが削除されません。このため、グローバルスタイルよりも CSS モジュールを使用することをお勧めします。

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

app/global.css

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

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

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 ディレクトリ内の任意の場所にインポートできます。

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>
  )
}

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

順序とマージ

Next.jsは、本番ビルド中にスタイルシートを自動的にチャンク（マージ）することでCSSを最適化します。CSSの順序は、アプリケーションコードにスタイルシートをインポートする順序によって決定されます。

例えば、<BaseButton>が<Page>で最初にインポートされるため、base-button.module.cssはpage.module.cssよりも先に順序付けられます。

base-button.tsx

import styles from './base-button.module.css'
 
export function BaseButton() {
  return <button className={styles.primary} />
}

page.ts

import { BaseButton } from './base-button'
import styles from './page.module.css'
 
export function Page() {
  return <BaseButton className={styles.primary} />
}

予測可能な順序を維持するために、以下をお勧めします。

CSSファイルを単一のJS/TSファイルにのみインポートします。
- グローバルクラス名を使用する場合は、グローバルスタイルを適用したい順序で同じファイルにインポートします。
グローバルスタイルよりもCSS Modulesを優先します。
- CSSモジュールには一貫した命名規則を使用します。例えば、<name>.tsxよりも<name>.module.cssを使用します。
共有スタイルは、個別の共有コンポーネントに抽出します。
Tailwindを使用する場合は、ファイルの先頭、できればルートレイアウトにスタイルシートをインポートします。
インポートを自動的にソートするリンター/フォーマッター（例えば、ESLintのsort-import）をオフにします。CSSのインポート順序は重要であるため、これによりCSSに意図しない影響を与える可能性があります。

知っておくと良いこと

CSSの順序は開発モードでは異なる動作をする可能性があるため、常にビルド（next build）を確認して、最終的なCSSの順序を検証してください。

next.config.jsのcssChunkingオプションを使用して、CSSのチャンク方法を制御できます。

追加機能

Next.jsには、スタイル追加のオーサリング体験を向上させるための追加機能が含まれています。

next devでローカルに実行している場合、ローカルスタイルシート（グローバルまたはCSS Modulesのいずれか）はFast Refreshを利用して、編集が保存されるとすぐに変更を反映します。
next buildで本番用にビルドする場合、CSSファイルは、スタイルを取得するために必要なネットワークリクエストの数を減らすために、より少ない数のミニファイされた.cssファイルにバンドルされます。
JavaScriptを無効にしても、スタイルは本番ビルド（next start）でロードされます。ただし、Fast Refreshを有効にするには、next devにJavaScriptが必要です。