Menu

スタイリング

Next.jsはアプリケーションのスタイリングに以下のようなさまざまな方法をサポートしています：

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

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

CSS

Next.jsアプリケーションをCSSモジュール、グローバルスタイル、外部スタイルシートでスタイリングする方法。

Tailwind CSS

Next.jsアプリケーションをTailwind CSSでスタイリングする。