Next.js はどのようなスタイリングオプションをサポートしていますか?

Question

Accepted Answer

Next.js はほぼすべての CSS アプローチをビルトイン処理でサポートしています。プロジェクトに合ったものを選択できます。 ## グローバル CSS ```tsx // app/layout.tsx — global styles imported once at the root import "./globals.css"; ``` ## CSS Modules (デフォルトでスコープ付き) ```tsx // Button.module.css → class names are locally hashed (no collisions) import styles from "./Button.module.css"; export default () => ; // renders class like "Button_primary__a1b2" — scoped to this component ``` `.module.css` の規約により、クラス名が自動的にスコープされるため、あるファイルの `.primary` が別のファイルの `.primary` と競合することはありません。CSS のグローバルスコープの問題をランタイムなしで解決します。 ## Tailwind CSS (非常に一般的) ```tsx export default () => ; ``` ユーティリティファースト。Next.js はファーストクラスのセットアップサポートを備えています。速度と一貫性で人気があり、未使用のスタイルを自動的にパージします。 ## CSS-in-JS ```tsx const Button = styled.button`background: blue;`; // styled-components, Emotion, etc. ``` 動作しますが、注意してください。ほとんどの CSS-in-JS ライブラリは **Client Components のみ** であり、Server Components には追加設定が必要です。新しいゼロランタイムオプション (vanilla-extract、Tailwind) は App Router のサーバーファーストモデルにより適しています。 ## Sass ```bash npm install sass # then import .scss files — built-in support, no config ``` ## 選択 ```text Tailwind → fast, consistent, server-friendly (popular default) CSS Modules → scoped, plain CSS, no runtime, great with Server Components CSS-in-JS → dynamic styles, but client-only + more setup in App Router Global CSS/Sass → resets, base styles, design tokens ``` ## なぜ重要なのか Next.js はスタイリングの選択を強制しません。グローバル CSS、スコープ付き CSS Modules、Tailwind、Sass、CSS-in-JS をビルトインツールでサポートしています。トレードオフを理解することが重要です。特に CSS-in-JS は App Router ではクライアントオンリーであり、一方 Tailwind/CSS Modules は Server Components と相性がよいということを知ることで、レンダリングモデルに合ったアプローチを選択するのに役立ちます。