CSS スタイリング

次に、CSS スタイリングについて説明します。

ご覧のとおり、インデックスページ（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アプリケーションは様々な方法でスタイルを設定できます。例えば、

• .cssおよび.scssファイルをインポートできるSass。
• Tailwind CSSのようなPostCSSライブラリ。
• styled-jsx、styled-components、emotionといったCSS-in-JSライブラリ

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