アプリケーションでCSSを使用する方法

Next.jsでは、以下のようなさまざまな方法でCSSを使用できます：

• CSSモジュール
• グローバルCSS
• 外部スタイルシート
• Tailwind CSS
• Sass
• CSS-in-JS

CSSモジュール

CSSモジュールは、一意のクラス名を生成することでCSSをローカルスコープ化します。これにより、異なるファイルで同じクラス名を使用しても衝突を心配する必要がありません。

CSSモジュールを使い始めるには、.module.css拡張子のファイルを作成し、pagesディレクトリ内の任意のコンポーネントにインポートします：

.blog {
  padding: 24px;
}

import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}

import styles from './blog.module.css'

export default function Page() {
  return <main className={styles.blog}></main>
}

グローバルCSS

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

pages/_app.jsファイルにスタイルシートをインポートすると、アプリケーションのすべてのルートにスタイルが適用されます：

import '@/styles/global.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

スタイルシートのグローバルな性質と競合を避けるため、pages/_app.js内でインポートする必要があります。

外部スタイルシート

Next.jsでは、JavaScriptファイルからCSSファイルをインポートできます。 これは、Next.jsがJavaScriptを超えてimportの概念を拡張しているため可能です。

node_modulesからのスタイルインポート

Next.js 9.5.4以降、node_modulesからのCSSファイルのインポートがアプリケーションのどこでも許可されています。

bootstrapやnprogressのようなグローバルスタイルシートは、pages/_app.js内でインポートする必要があります。例：

import 'bootstrap/dist/css/bootstrap.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

サードパーティコンポーネントに必要なCSSは、コンポーネント内でインポートできます。例：

import { useState } from 'react'
import { Dialog } from '@reach/dialog'
import VisuallyHidden from '@reach/visually-hidden'
import '@reach/dialog/styles.css'

function ExampleDialog(props) {
  const [showDialog, setShowDialog] = useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)

  return (
    <div>
      <button onClick={open}>ダイアログを開く</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>閉じる</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>こんにちは。私はダイアログです</p>
      </Dialog>
    </div>
  )
}

順序と結合

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

例えば、<BaseButton>がpage.module.cssより前にインポートされているため、base-button.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 { 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} />
}

import styles from './base-button.module.css'

export function BaseButton() {
  return <button className={styles.primary} />
}

推奨事項

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

• CSSのインポートは単一のJavaScriptまたはTypeScriptエントリファイルに限定するようにしてください
• グローバルスタイルとTailwindスタイルシートはアプリケーションのルートでインポートしてください
• ネストされたコンポーネントにはグローバルスタイルではなくCSSモジュールを使用してください
• CSSモジュールには一貫した命名規則を使用してください（例：<name>.module.cssを<name>.tsxよりも優先）
• 共有スタイルは共有コンポーネントに抽出して重複インポートを避けてください
• ESLintのsort-importsのようなインポートを自動ソートするリンターやフォーマッターを無効にしてください
• CSSのチャンク方法を制御するには、next.config.jsのcssChunkingオプションを使用できます

開発環境と本番環境

• 開発環境（next dev）では、CSSの更新が高速リフレッシュですぐに適用されます
• 本番環境（next build）では、すべてのCSSファイルが自動的に最小化されコード分割された複数の.cssファイルに結合され、ルートごとに最小限のCSSがロードされるようになります
• 本番環境ではJavaScriptが無効でもCSSはロードされますが、開発環境では高速リフレッシュのためにJavaScriptが必要です
• CSSの順序は開発環境では異なる動作をする可能性があるため、最終的なCSS順序を確認するには必ずビルド（next build）をチェックしてください