スタイリング

Next.js では以下のようなさまざまなスタイリング方法をサポートしています:

  • グローバル CSS: シンプルで使いやすく、従来の CSS に慣れている人には親しみやすい方法ですが、アプリケーションが成長するにつれて CSS バンドルが大きくなったり、スタイル管理が難しくなったりする可能性があります。
  • CSS モジュール: ローカルスコープの CSS クラスを作成することで、命名衝突を避け、メンテナンス性を向上させます。
  • Tailwind CSS: ユーティリティファーストの CSS フレームワークで、ユーティリティクラスを組み合わせることで迅速にカスタムデザインを実現できます。
  • Sass: 変数、ネストされたルール、ミックスインなどの機能で CSS を拡張する人気の CSS プリプロセッサです。
  • CSS-in-JS: JavaScript コンポーネントに直接 CSS を埋め込み、動的でスコープされたスタイリングを可能にします。

各アプローチについて詳しく知りたい場合は、それぞれのドキュメントを参照してください: