メインコンテンツまでスキップ

CSS

Next.jsでは、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ディレクトリ内の任意のレイアウト、ページ、またはコンポーネントにインポートできます。

Good to know:

  • これはpagesディレクトリとは異なり、グローバルスタイルは_app.jsファイルの中でのみインポートできます。
  • Next.jsはグローバルでないスタイルの使用をサポートしていません。これは、すべてのページに適用でき、アプリケーションの存続中に存在できることを意味します。これは、Next.jsがReactの組み込みのスタイルシートサポートを使用してSuspenseと統合するためです。この組み込みサポートは、ルート間をナビゲートするときにスタイルを削除しないため、CSSモジュールの方をグローバルスタイルよりも推奨します。

例えば、app/global.cssというスタイルシートを考えます：

app/global.css
body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

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

app/layout.tsx
// これらのスタイルはアプリケーションのすべてのルートに適用されます
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>
  )
}

Good to know：外部スタイルシートはnpmパッケージから直接インポートされるか、コートベースと共置する必要があります。<link rel="stylesheet" />を使用することはできません。

順序と結合​

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

例えば、base-button.module.cssはpage.module.cssよりも順序が前になります。なぜなら、<Page>で<BaseButton>が最初にインポートされるからです：

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モジュールを優先します。
    • CSSモジュールには一貫した命名規則を使用します。例えば、<name>.module.cssを<name>.tsxよりも使用します。
  • 共有スタイルを別の共有コンポーネントに抽出します。
  • Tailwindを使用している場合は、スタイルシートをファイルの先頭、できればRoot レイアウトにインポートします。
  • 自動的にインポートをソートするリント/フォーマッタ（例：ESLintのsort-import）をオフにします。これにより、意図せずにCSSに影響を与える可能性があるためです。CSSのインポート順序は重要です。

Good to know:

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

追加機能​

Next.jsは、スタイルの追加に関する著者エクスペリエンスを向上させる追加機能を提供しています：

  • next devをローカルで実行している場合、ローカルスタイルシート（グローバルまたはCSSモジュールのどちらか）は、保存されたときに編集を瞬時に反映するFast Refreshを活用します。
  • next buildで本番ビルドを行う際、CSSファイルは、スタイルを取得するために必要なネットワークリクエスト数を減らすために、少ない数の最小化された.cssファイルにバンドルされます。
  • JavaScriptを無効にすると、スタイルは本番ビルド（next start）で依然として読み込まれます。ただし、Fast Refreshを有効にするためにnext devにはJavaScriptが必要です。