アプリケーションでの CSS の使用方法

Next.js は、アプリケーションのスタイル設定に、以下を含むいくつかの CSS の方法を提供します。

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

Tailwind CSS

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

Tailwind CSS のインストール

pnpm add -D tailwindcss @tailwindcss/postcss

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

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

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

@import 'tailwindcss';

pages/_app.js ファイルに CSS ファイルをインポートする

import '@/styles/globals.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

これで、アプリケーションで Tailwind のユーティリティクラスの使用を開始できます。

export default function Home() {
  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 拡張子を持つ新しいファイルを作成し、pages ディレクトリ内の任意のコンポーネントにインポートします。

.blog {
  padding: 24px;
}

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 が import の概念を JavaScript 以外にも拡張しているため可能です。

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}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <button className="close-button" onClick={close}>
          <VisuallyHidden>Close</VisuallyHidden>
          <span aria-hidden>×</span>
        </button>
        <p>Hello there. I am a dialog</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 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 のチャンク方法を制御できます。

開発 vs 本番

• 開発中（next dev）では、Fast Refresh により CSS の変更は即座に適用されます。
• 本番環境（next build）では、すべての CSS ファイルは自動的に結合され、最小化されコード分割された .css ファイルになります。これにより、ルートに必要な最小限の CSS が読み込まれることが保証されます。
• 本番環境では CSS は JavaScript が無効でも読み込まれますが、開発環境では Fast Refresh のために JavaScript が必要です。
• 開発環境では CSS の順序が異なる場合があります。最終的な CSS の順序を確認するために、必ずビルド（next build）を確認してください。