CSS

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

Tailwind CSS
CSS Modules
Global CSS
External Stylesheets
Sass
CSS-in-JS

Tailwind CSS

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

Tailwind CSSをインストールします。

pnpm add -D tailwindcss @tailwindcss/postcss

npm install -D tailwindcss @tailwindcss/postcss

yarn add -D tailwindcss @tailwindcss/postcss

bun add -D tailwindcss @tailwindcss/postcss

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

postcss.config.mjs

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

グローバルCSSファイルにTailwindをインポートします。

app/globals.css

@import 'tailwindcss';

CSSファイルをルートレイアウトにインポートします。

app/layout.tsx

TypeScript

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

これでアプリケーションでTailwindのユーティリティクラスを使い始めることができます。

app/page.tsx

TypeScript

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ディレクトリ内のコンポーネントにインポートします。

app/blog/blog.module.css

.blog {
  padding: 24px;
}

app/blog/page.tsx

TypeScript

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

Global CSS

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

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

app/global.css

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

app/layout.tsx

TypeScript

// これらのスタイルはアプリケーション内のすべてのルートに適用されます
import './global.css'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

補足： グローバルスタイルは、appディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。ただし、Next.jsはReactの組み込みスタイルシートサポートを使用してSuspenseと統合しているため、現在のところ、ルート間をナビゲートするときにスタイルシートが削除されず、競合が生じる可能性があります。本当にグローバルなCSS（Tailwindのベーススタイルなど）にはグローバルスタイルを使用し、コンポーネントのスタイリングにはTailwind CSSを使用し、必要に応じてカスタムスコープCSSにはCSS Modulesを使用することをお勧めします。

外部スタイルシート

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

app/layout.tsx

TypeScript

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="..." />も使用できます。詳細については、Reactlinkドキュメントを参照してください。

順序とマージ

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

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

page.tsx

TypeScript

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

base-button.tsx

TypeScript

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が読み込まれることを保証します。
CSSは本番環境ではJavaScriptが無効化された状態でも読み込まれますが、JavaScriptは開発環境ではFast Refreshのために必須です。
CSS順序は開発環境で異なる動作をする可能性があるため、常に最終的なCSS順序を確認するためにビルド（next build）をチェックしてください。

CSS

Tailwind CSS

CSS Modules

Global CSS

外部スタイルシート

順序とマージ

推奨事項

開発環境と本番環境

次のステップ

CSS-in-JS

Sass

Tailwind CSS v3