10
チャプター10
アセット、メタデータ、CSS
現在、追加した2番目のページにはスタイルがありません。ページをスタイルするためにCSSを追加しましょう。
Next.js は CSS および Sass の組み込みサポートを提供しています。このコースでは CSS を使用します。
このレッスンでは、Next.js が画像などの静的アセットをどのように処理するか、また <title> タグのようなページメタデータをどのように処理するかについても説明します。
このレッスンで学ぶこと
このレッスンでは、以下のことを学びます。
- Next.js に 静的ファイル (画像など) を追加する方法。
- 各ページで
<head>の内容をカスタマイズする方法。 - CSS Modules を使用してスタイル設定された再利用可能な React コンポーネントの作成方法。
pages/_app.jsで グローバル CSS を追加する方法。- Next.js でのスタイリングに役立つヒント。
前提条件
- 基本的な CSS の知識。このコースでは Next.js アプリに CSS を追加する方法について説明しますが、CSS の基本については説明しません。
Next.js のスタイリングに関する詳細なドキュメントをお探しの方は、CSS ドキュメントをご覧ください。
役に立ちましたか？