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

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

Good to know:

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

例えば、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の順序は、アプリケーションコードにスタイルシートをインポートする順序によって決定されます。

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

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 default function Page() {
  return <BaseButton className={styles.primary} />
}

予測可能な順序を維持するために、次のことをお勧めします：

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

Good to know:

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

追加機能​

Next.jsは、スタイルの追加体験を向上させるための追加機能を含んでいます：

  • next devをローカルで実行しているとき、ローカルスタイルシート（グローバルまたはCSS Modulesのいずれか）は、Fast Refreshを利用して、編集が保存されるとすぐに変更を反映します。
  • next buildでプロダクション用にビルドするとき、CSSファイルは、スタイルを取得するために必要なネットワークリクエストの数を減らすために、より少ない最小化された.cssファイルにバンドルされます。
  • JavaScriptを無効にした場合でも、スタイルはプロダクションビルド（next start）でロードされます。ただし、next devでFast Refreshを有効にするには、JavaScriptが必要です。