Menu

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

Next.jsは、CSSを使用してアプリケーションをスタイリングするためのいくつかの方法を提供しています。

Tailwind CSS

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

Tailwind CSSをインストールします。

pnpm add -D tailwindcss @tailwindcss/postcss
npm install -D tailwindcss @tailwindcss/postcss
yarn add -D tailwindcss @tailwindcss/postcss
bun add -D tailwindcss @tailwindcss/postcss

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

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

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

styles/globals.css
@import 'tailwindcss';

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

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

これでアプリケーションでTailwindのユーティリティクラスを使い始めることができます。

pages/index.tsx
TypeScript
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ディレクトリ内のコンポーネントにインポートします。

/styles/blog.module.css
.blog {
  padding: 24px;
}
pages/blog/index.tsx
TypeScript
import styles from './blog.module.css'
 
export default function Page() {
  return <main className={styles.blog}></main>
}

Global CSS

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

スタイルシートをpages/_app.jsファイルにインポートして、アプリケーションのすべてのルートにスタイルを適用します。

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内にファイルをインポートする必要があります。例えば。

pages/_app.js
import 'bootstrap/dist/css/bootstrap.css'
 
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

サードパーティコンポーネントに必要なCSSをインポートするには、コンポーネント内でこれを行うことができます。例えば。

components/example-dialog.js
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より前に順序付けられます。

page.tsx
TypeScript
import { BaseButton } from './base-button'
import styles from './page.module.css'
 
export default function Page() {
  return <BaseButton className={styles.primary} />
}
base-button.tsx
TypeScript
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をチャンク化する方法を制御できます。

開発環境と本番環境

  • 開発環境（next dev）では、Fast RefreshによりCSSの更新が即座に適用されます。
  • 本番環境（next build）では、すべてのCSSファイルが自動的に多数の縮小およびコード分割された .cssファイルに連結され、ルートのために最小限の量のCSSが読み込まれることを保証します。
  • CSSは本番環境ではJavaScriptが無効化された状態でも読み込まれますが、JavaScriptは開発環境ではFast Refreshのために必須です。
  • CSS順序は開発環境で異なる動作をする可能性があるため、常に最終的なCSS順序を確認するためにビルド（next build）をチェックしてください。

次のステップ

このページで説明する機能についてさらに詳しく学習します。

CSS-in-JS

Next.jsでCSS-in-JSライブラリを使用する

Sass

Next.jsアプリケーションでSassを使用する方法を学びます。

Tailwind CSS

Tailwind CSSを使用してNext.jsアプリケーションをスタイリングします。