コンテンツへスキップ
App Routerアプリケーションの構築スタイリング

スタイリング

Next.jsは、アプリケーションのスタイリングにさまざまな方法をサポートしています。それには以下が含まれます。

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

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

CSS

CSS Modules、グローバルスタイル、外部スタイルシートを使用してNext.jsアプリケーションをスタイリングします。

Tailwind CSS

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

Sass

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

CSS-in-JS

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