CSSスタイリング

それでは、CSSスタイリングについて説明します。

ご覧のとおり、indexページ（https://:3000）にはすでにいくつかのスタイルが適用されています。ファイル構造を見ると、stylesという名前のフォルダがあり、その中に2つのCSSファイルがあります。グローバルスタイルシート（global.css）とCSSモジュール（Home.module.css）です。

プロジェクトにこれらのファイルがない場合は、ここからスターターコードをダウンロードできます。

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"

CSS Modules

CSS Modulesは、一意のクラス名を自動的に作成することで、コンポーネントレベルでCSSをローカルにスコープすることを可能にします。これにより、クラス名の衝突を心配することなく、異なるファイルで同じCSSクラス名を使用できます。

CSS Modulesに加えて、Next.jsアプリケーションはさまざまな方法でスタイリングできます。これには以下が含まれます。

• Sass。.cssおよび.scssファイルをインポートできます。
• PostCSSライブラリ。たとえば、Tailwind CSS。
• CSS-in-JSライブラリ。たとえば、styled-jsx、styled-components、およびemotion。

このレッスンでは、Next.jsでCSS ModulesとSassを使用する方法について説明します。早速見ていきましょう！