CSS

Next.js は、アプリケーションのスタイリングに、CSS を含むいくつかの方法を提供しています。

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

Tailwind CSS

Tailwind CSSは、カスタムデザインを構築するための低レベルユーティリティクラスを提供する、ユーティリティファーストCSSフレームワークです。

Tailwind CSS のインストール

pnpm add -D tailwindcss @tailwindcss/postcss

postcss.config.mjs ファイルに PostCSS プラグインを追加

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
}

グローバル CSS ファイルに Tailwind をインポート

@import 'tailwindcss';

ルートレイアウトに CSS ファイルをインポート

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

これで、アプリケーションで Tailwind のユーティリティクラスの使用を開始できます。

export default function Page() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
    </main>
  )
}

参考: より古いブラウザでの広範なブラウザサポートが必要な場合は、Tailwind CSS v3 のセットアップ手順を参照してください。

CSS Modules

CSS Modules は、一意のクラス名を生成することにより、CSS をローカルスコープします。これにより、名前の衝突を心配することなく、異なるファイルで同じクラスを使用できます。

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

.blog {
  padding: 24px;
}

import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

グローバル CSS

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

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

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

// 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 ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.js は Suspense との統合のために、React の組み込みスタイルシートサポートを使用しているため、現在、ルート間を移動してもスタイルシートは削除されず、競合が発生する可能性があります。真にグローバルな CSS（Tailwind のベーススタイルなど）にはグローバルスタイルを、コンポーネントのスタイリングにはTailwind CSSを、必要に応じてカスタムスコープ CSS にはCSS Modulesを使用することをお勧めします。

外部スタイルシート

外部パッケージによって公開されたスタイルシートは、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 の順序は、コードでのスタイルのインポート順によって決まります。

たとえば、base-button.module.css は <BaseButton> が page.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} />
}

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

推奨事項

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

CSS のインポートは、単一の JavaScript または TypeScript エントリファイルにまとめるようにしてください。
グローバルスタイルと Tailwind スタイルシートは、アプリケーションのルートにインポートしてください。
Tailwind CSS を使用することが、ほとんどのスタイリングニーズに対応できます。ユーティリティクラスで一般的なデザインパターンをカバーしています。
Tailwind ユーティリティが十分でない場合は、コンポーネント固有のスタイルに CSS Modules を使用してください。
CSS モジュールの命名規則を一貫させます。たとえば、<name>.tsx ではなく <name>.module.css を使用するなど。
重複するインポートを避けるために、共有スタイルを共有コンポーネントに抽出します。
ESLint の sort-imports のように、インポートを自動ソートするリンターまたはフォーマッターを無効にします。
next.config.js の cssChunking オプションを使用して、CSS のチャンク化方法を制御できます。

開発と本番

開発中（next dev）は、Fast Refresh により、CSS の更新が即座に適用されます。
本番環境（next build）では、すべての CSS ファイルは自動的に連結され、多数のミニファイおよびコード分割された .css ファイルになります。これにより、ルートに必要な最小限の CSS がロードされます。
本番環境では、JavaScript が無効な場合でも CSS はロードされますが、開発中は Fast Refresh のために JavaScript が必要です。
開発環境では CSS の順序が異なる場合があります。最終的な CSS の順序を確認するために、必ずビルド（next build）を確認してください。

次のステップ

アプリケーションで CSS を使用する代替方法について、さらに詳しく学んでください。

CSS