アセット、メタデータ、CSS
現在、追加した2つ目のページにはスタイリングが適用されていません。このページにCSSを追加してスタイルを適用しましょう。
Next.jsはCSSとSassを組み込みでサポートしています。このコースではCSSを使用します。
このレッスンでは、画像などの静的アセットや<title>タグのようなページメタデータをNext.jsがどのように扱うかについても説明します。
このレッスンで学ぶこと
このレッスンでは以下の内容を学びます:
- Next.jsに静的ファイル（画像など）を追加する方法
- 各ページの
<head>内に配置する内容をカスタマイズする方法 - CSS Modulesを使用してスタイルを適用した再利用可能なReactコンポーネントを作成する方法
pages/_app.jsでグローバルCSSを追加する方法- Next.jsでのスタイリングに関する便利なヒント
前提条件
- CSSの基礎知識。このコースではNext.jsアプリにCSSを追加する方法を説明しますが、CSSの基礎については扱いません。
Next.jsのスタイリングに関する詳細なドキュメントが必要な場合は、CSSドキュメントを参照してください。