Assets, Metadata, and CSS

[yutabee]

The second page we added currently does not have styling. Let's add some CSS to style the page.

Next.js has built-in support for CSS and Sass. For this course, we will use CSS.

This lesson will also talk about how Next.js handles static assets like images and page metadata like the <title> tag.

What You’ll Learn in This Lesson

In this lesson, you’ll learn:

• How to add static files (images, etc) to Next.js.
• How to customize what goes inside the for each page.
• How to create a reusable React component which is styled using [CSS Modules](https://nextjs.org/docs/basic-features/built-in-- - css-support#adding-component-level-css).
• How to add global CSS in - pages/_app.js.
• Some useful tips for styling in Next.js.

  Prerequisites

  Basic CSS knowledge. This course will go over how to add CSS in a Next.js app, but it won't cover CSS fundamentals. If you’re looking for detailed documentation on Next.js styling, take a look at the CSS documentation.

[yutabee]

Image Component and Image Optimization

next/image は、HTML 要素の拡張で、現代のWebに対応したものです。

Next.jsは、Image Optimizationにもデフォルトで対応しています。これにより、ブラウザーがサポートしている場合には、WebPなどの現代的なフォーマットで画像をリサイズ、最適化、配信することができます。これにより、小さなビューポートを持つデバイスに対して大きな画像を送信することを避けることができます。また、Next.jsは、将来の画像フォーマットを自動的に採用し、そのフォーマットをサポートしているブラウザーに配信することもできます。

[yutabee]

Next.jsでは、画像の最適化をビルド時に行うのではなく、リクエストされた時に必要に応じて最適化することができます。これにより、ビルド時間が長くなることがなく、必要な画像のみが読み込まれるため、ページ速度が向上するというメリットがあります。

また、Next.jsのImage Componentは、遅延読み込みをデフォルトで実装しているため、画像がビューポート外にある場合でも、ページ速度が低下することがありません。画像は、ユーザーがスクロールしてビューポートに入ったときに読み込まれます。さらに、画像はCumulative Layout Shiftを回避するようにレンダリングされるため、ユーザー体験が向上するという利点があります。

Image Componentは、要素を拡張したもので、最適化された画像を表示する際に便利です。表示したい画像のサイズとアスペクト比を指定することができます。例えば、プロフィール画像を表示する場合は、コンポーネントを使用して、幅と高さを指定することができます。Image Componentは、サーバーサイドレンダリング、静的生成、クライアントサイドレンダリングのすべてに対応しており、ビルド時に画像を最適化する必要がなく、必要に応じて最適化された画像がリクエストされます。

詳細のドキュメント： https://nextjs.org/docs/basic-features/image-optimization

[yutabee]

Third-Party JavaScript and Script Component

<Script>コンポーネントは、Next.jsで第三者のJavaScriptを追加するための最適な方法の一つです。このコンポーネントは、HTMLの<script>要素を拡張しており、スクリプトの遅延ロードや非同期実行をサポートしています。これにより、ページの読み込み速度が向上し、ユーザーのエクスペリエンスが向上することが期待されます。

<Script>コンポーネントを使用すると、以下のようなプロパティを設定できます。

• src：追加する第三者のスクリプトのURL。
• strategy：スクリプトの読み込み戦略を指定します。デフォルトでは、即座にスクリプトが読み込まれますが、"lazyOnload"を指定することで、ブラウザがアイドル状態になっているときにスクリプトを読み込むことができます。
• onLoad：スクリプトが正常に読み込まれた後に実行するJavaScriptコードを指定します。

例えば、FacebookのSDKを追加する場合、以下のように Githubissues.

Githubissues is a development platform for aggregating issues.