次に、CSSスタイリングについて説明します。
ご覧のとおり、インデックスページ(https://:3000)にはすでにいくつかのスタイルが適用されています。ファイル構造を見ると、stylesというフォルダがあり、その中にグローバルスタイルシート(global.css)とCSSモジュール(Home.module.css)の2つのCSSファイルがあることがわかります。
プロジェクトにこれらのファイルがない場合は、こちらからスターターコードをダウンロードできます
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"
CSSモジュールを使用すると、一意のクラス名を自動的に作成することにより、コンポーネントレベルでCSSをローカルにスコープできます。これにより、クラス名の衝突を心配することなく、異なるファイルで同じCSSクラス名を使用できます。
CSSモジュールに加えて、次のようなさまざまな方法でNext.jsアプリケーションをスタイルできます。
.cssファイルと.scssファイルをインポートできるSass。