アプリケーションでCSSを使用する方法

Next.jsでは、以下のようなさまざまな方法でCSSを使用できます：

CSSモジュール
グローバルCSS
外部スタイルシート
Tailwind CSS
Sass
CSS-in-JS

CSSモジュール

CSSモジュールは、一意のクラス名を生成することでCSSをローカルスコープ化します。これにより、異なるファイルで同じクラス名を使用しても衝突を心配する必要がありません。

CSSモジュールを使い始めるには、.module.css拡張子のファイルを作成し、appディレクトリ内の任意のコンポーネントにインポートします：

app/blog/blog.module.css

.blog {
  padding: 24px;
}

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

export default function Page() {
  return <main className={styles.blog}></main>
}

グローバルCSS

アプリケーション全体にスタイルを適用するためにグローバルCSSを使用できます。

app/global.cssファイルを作成し、ルートレイアウトにインポートすると、アプリケーションのすべてのルートにスタイルが適用されます：

app/global.css

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

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

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

豆知識: グローバルスタイルはappディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはスタイルシートの統合にReactの組み込みサスペンス機能を使用しているため、現在はルート間を移動してもスタイルシートが削除されず、競合が発生する可能性があります。本当にグローバルなCSSにはグローバルスタイルを、スコープされたCSSにはCSSモジュールを使用することをお勧めします。

外部スタイルシート

外部パッケージで公開されているスタイルシートは、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>
  )
}

豆知識: React 19では、<link rel="stylesheet" href="..." />も使用できます。詳細はReact linkドキュメントを参照してください。

順序と結合

Next.jsは、本番ビルド時にスタイルシートを自動的にチャンク（結合）することでCSSを最適化します。CSSの順序は、コード内でスタイルをインポートする順序に依存します。

例えば、<BaseButton>がpage.module.cssより前にインポートされているため、base-button.module.cssはpage.module.cssより前に順序付けられます：

import { BaseButton } from './base-button'
import styles from './page.module.css'

export default function Page() {
  return <BaseButton className={styles.primary} />
}

推奨事項

CSSの順序を予測可能にするために：

CSSのインポートは単一のJavaScriptまたはTypeScriptエントリファイルに限定するようにしてください
グローバルスタイルとTailwindスタイルシートはアプリケーションのルートでインポートしてください
ネストされたコンポーネントにはグローバルスタイルではなくCSSモジュールを使用してください
CSSモジュールには一貫した命名規則を使用してください（例：<name>.module.cssを<name>.tsxよりも優先）
共有スタイルは共有コンポーネントに抽出して重複インポートを避けてください
ESLintのsort-importsのようなインポートを自動ソートするリンターやフォーマッターを無効にしてください
CSSのチャンク方法を制御するには、next.config.jsのcssChunkingオプションを使用できます

開発環境と本番環境

開発環境（next dev）では、CSSの更新が高速リフレッシュですぐに適用されます
本番環境（next build）では、すべてのCSSファイルが自動的に最小化されコード分割された複数の.cssファイルに結合され、ルートごとに最小限のCSSがロードされるようになります
本番環境ではJavaScriptが無効でもCSSはロードされますが、開発環境では高速リフレッシュのためにJavaScriptが必要です
CSSの順序は開発環境では異なる動作をする可能性があるため、最終的なCSS順序を確認するには必ずビルド（next build）をチェックしてください

アプリケーションでCSSを使用する方法

CSSモジュール

グローバルCSS

外部スタイルシート

順序と結合

推奨事項

開発環境と本番環境

Tailwind CSS

Sass

CSS-in-JS

On this page