メインコンテンツまでスキップ

スタイリング

Next.js は、アプリケーションをスタイリングするさまざまな方法をサポートしています:

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

各アプローチの詳細については、それぞれのドキュメントを参照してください。

  • CSS Modules: CSS Modules を使用して Next.js アプリケーションをスタイルします。
  • Tailwind CSS: Tailwind CSS を使用して Next.js アプリケーションをスタイルします。
  • Sass: Next.js で CSS-in-JS ライブラリを使用する。
  • CSS-in-JS: Sass を使って Next.js アプリケーションをスタイリングします。