Menu

CSS

Next.jsは、以下を含む複数のCSS処理方法をサポートしています：

CSS Modules

Next.jsは、.module.css拡張子を使用するCSS Modulesに組み込みでサポートしています。

CSS Modulesは、自動的に一意のクラス名を作成することで、CSSをローカルにスコープ化します。これにより、他のファイルで同じクラス名を使用する際に、名前の衝突を心配することなく使用できます。この動作により、CSS ModulesはコンポーネントレベルのCSSを含めるのに最適な方法となります。

例

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

app/dashboard/layout.tsx
TypeScript
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 Modulesは、.module.cssと.module.sass拡張子を持つファイルでのみ有効です。

本番環境では、すべてのCSS Moduleファイルは自動的に連結され、多くの縮小され、コード分割された .cssファイルになります。 これらの.cssファイルは、アプリケーションのホットな実行パスを表し、アプリケーションを描画するために必要な最小限のCSSが読み込まれることを保証します。

グローバルスタイル

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

補足：

  • これはpagesディレクトリとは異なり、グローバルスタイルは_app.jsファイル内でのみインポートできます。
  • Next.jsは、スタイルシートが実際にグローバルである（すべてのページに適用でき、アプリケーションの存続期間中存在できる）場合を除いて、グローバルスタイルの使用をサポートしていません。これは、Next.jsがSuspenseと統合するためにReactの組み込みスタイルシートサポートを使用するためです。この組み込みサポートは現在、ルート間を移動する際にスタイルシートを削除しません。このため、グローバルスタイルよりもCSS Modulesの使用をお勧めします。

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

外部スタイルシート

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

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

順序とマージ

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

例えば、<BaseButton>が<Page>で最初にインポートされるため、base-button.module.cssはpage.module.cssの前に配置されます：

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

予測可能な順序を維持するために、以下を推奨します：

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

補足:

  • CSSの順序は開発モードで異なる動作をする可能性があるため、常にビルド（next build）で最終的なCSSの順序を確認してください。
  • next.config.jsのcssChunkingオプションを使用して、CSSのチャンキング方法を制御できます。

追加機能

Next.jsには、スタイル追加の作成体験を向上させるための追加機能が含まれています：

  • next devでローカル実行する際、ローカルスタイルシート（グローバルまたはCSSモジュール）はFast Refreshを活用し、編集を保存するとすぐに変更が反映されます。
  • next buildで本番向けにビルドする際、CSSファイルは少数の最小化された.cssファイルにバンドルされ、スタイル取得に必要なネットワークリクエストの数を削減します。
  • JavaScriptを無効にしても、本番ビルド（next start）では、スタイルは引き続きロードされます。ただし、Fast Refreshを有効にするにはnext devにJavaScriptが必要です。