NextJSの学習をする。 以下のページを翻訳し記録する。 https://nextjs.org/learn-pages-router/basics/assets-metadata-css

1. reactチュートリアル1（create a nextjs app）
2. reactチュートリアル2（Navigate Between Pages）
3. reactチュートリアル3（Assets, Metadata, and CSS）
4. reactチュートリアル4（Pre-rendering and Data Fetching）
5. reactチュートリアル5 (Dynamic Routes)
6. reactチュートリアル6（API Routes）
7. reactチュートリアル7（Deploying Your Next.js App）

アセット、メタデータ、CSS | Next.js を学ぶ

#

追加した 2 番目のページには現在スタイルがありません。CSS を追加してページのスタイルを設定しましょう。

Next.js にはCSSとSassのサポートが組み込まれています。このコースでは CSS を使用します。

このレッスンでは、Next.js が画像などの静的アセットや<title>タグなどのページ メタデータをどのように処理するかについても説明します

このレッスンで学ぶこと

#

このレッスンでは、次のことを学習します。

• Next.js に静的ファイル(画像など)を追加する方法。
• 各ページの内部に表示される内容をカスタマイズする方法。
• CSS モジュールを使用してスタイル設定された再利用可能な React コンポーネントを作成する方法。
• グローバル CSS を pages/_app.js に追加する方法。
• Next.js でのスタイル設定に関する役立つヒント

前提条件

#

CSS の基本的な知識。このコースでは、Next.js アプリに CSS を追加する方法について説明しますが、CSS の基礎については説明しません。Next.js スタイルに関する詳細なドキュメントをお探しの場合は、CSS ドキュメントを参照してください。

Assets

#

Next.js は、画像などの静的アセットを最上位publicディレクトリで提供できます。内部のファイルは、pagesと同様にpublicもアプリケーションのルートから参照できます。publicディレクトリはrobots.txtやGoogleのサイト検証などのその他の静的な資産で役立ちます。より深く学習するためにはStatic File Serving を確認しましょう。

プロファイルピクチャのダウンロード

#

最初に自分のプロファイル写真を手に入れましょう。

• 自分のプロファイル写真をダウンロードするか、このファイルを使いましょう。
• public ディレクトリの中にimagesディレクトリを作りましょう。
• public/imagesにprofile.jpgとして写真を保存しましょう。
• 写真はおおよそ400px x 400px のサイズが可能です。
• public ディレクトリの下の使っていないSVGロゴファイルは削除してよいです。

最適化されていない画像

#

通常補HTMLではプロファイル写真を以下のように追加できます。

<img src="/images/profile.jpg" alt="Your Name"/>

しかしこれは以下などのマニュアル作業を必要とします。

• 異なるスクリーンサイズに対して適応的に表示できること
• 3rdパーティのツールやライブラリに対して写真を最適化すること
• 表示画面に入ったときだけ画像をロードすること

Image Componentと画像の最適化

#

next/imageはHTMLの<img>要素の拡張で、モダンウェブ向けの進化です。

Next.jsはデフォルトで画像の最適化をサポートしています。ブラウザがサポートしていればリサイズ、最適化、WebP等の最新のフォーマットの提供ができます。これは小さな画面を持つデバイスに大きな画像を提示してしまうことを避けます。また、これにより新しいイメージフォーマットがブラウザにサポートされるとNextjsは自動的に採用できます。

画像の自動最適化はどのイメージソースにも使うことができます。また、CMS等の外部ソースで提供されている画像も最適化することができます。

Image Componentを使う

#

ビルド時に画像を最適化する代わりに、Next.jsはユーザのリクエストによって要求を受けた時に画像最適化を実施します。静的サイトジェネレータや静的サイトとは違い、画像が10枚だろうが1000万枚だろうがビルド時間は増えません。

画像はデフォルトで遅延読込されます。つまり、画面外の画像がページのスピードの足かせとなることはありません。

画像はCumulative Layout ShiftやCore Web Vitalを避けて表示されます。

以下の例でプロフィール写真を表示する例を提示します。heightとwidthは希望する表示サイズで、縦横比はソースイメージと同じです。

Note : このコンポーネントは後で使うので、まだコピーする必要はありません。

import Image from 'next/image';

const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

画像の自動最適化についてより深く知るにはドキュメントを確認してください。

Image Componentについて知りたい場合はAPI reference for next/imageを確認してください。

Metadata

#