こんにちは、エンジニアのオオバです。

→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら

Next.jsは画像を自動で最適化する

Assets - Assets, Metadata, and CSS | Learn Next.js
Next.jsのチュートリアルを続けていきます。

今回は静的ファイル、画像の扱いです。
Next.jsはブラウザに合わせて自動
最適化された状態でレンダリングします。

静的ファイルはpublicディレクトリへ格納

まず表示させる画像をルートのpublicディレクトリに格納します。
今回はpublicの中にimagesディレクトリを作りました。
またpublicディレクトリrobot.txtを置く場所としても活用します。

【Next.js】画像は自動に最適化される、すごい_0

この画像を次のパスに配置します。

public/images/profile.png  

imgタグは使う意味はない

通常ならこのようにHTMLを記述していく事になると思いますが、
以下の処理を手作業でする必要のある最適化されていない手法です。

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

Imageコンポーネントを使う

imgタグの代わりにImageコンポーネントをNext.jsでは使用します。

Next.jsはデフォルトでImage Optimizationをサポートしています。
ブラウザがサポートしている場合にはWebPのような
最新の形式で画像をリサイズ、最適化、配信ができます。

これによりビューポートの小さいデバイスに
大きな画像を配信する必要がなくなります。

またNext.jsは将来の画像フォーマットを自動的に採用し、
それらのフォーマットをサポートする
ブラウザに画像を提供することができます。

しかも画像の自動最適化は、どのような画像でも動作します。

<Image  
  src="/images/profile.png"  
  height={144}  // 高さ指定  
  width={144}  // 幅指定  
  alt="Your Name"  
/>  

こちらのコードを前回の記事に続く形で、
index.js内の``の後に記述します。

【Next.js】画像は自動に最適化される、すごい_1

このようにImageコンポーネントを使って、
静的画像をレンダリングすることが出来ました。

コチラのChrome拡張
pngファイルだったものが自動で最適化され、
WebPでレンダリングされていました。

【Next.js】画像は自動に最適化される、すごい_2

WebPにマークが付きます。

その他Imageコンポーネントのメリットまとめ

Imageコンポーネントの公式リファレンスはコチラ
next/image | Next.js

最後に

チュートリアル進める中で自動で最適化してくれる
Imageコンポーネントがすごいなと思いました。

Metadata - Assets, Metadata, and CSS | Learn Next.js

次回はHead、metadataについてです。

オススメ記事
検証環境