Next.js 10 の画像最適化システム next/image を読んで理解を深める

BRANK

※ ソースコードは 2020/11/20 時点の canary ブランチを参照しています。Next.js 10 では next/image から提供されるコンポーネントを使用することで、開発者が特別に意識することなく画像を最適化することができるようになりました。リリースのタイミングで Next.js Conf が開催されていたこともあり、この機能は大きく話題になりました。今回はコードを読みながら最適化の裏側を紐解いて next/image の理解を深めようと思います。何を調べるのか目的を持たずに読んでいると露頭に迷いそうなので、最初に何を調べるのか決めました。今回は最適化の仕組みを紐解くことを目的として、コードを読みながら次の 2 つについて調べます。最適化された画像の出し分け画像最適化処理結論最適化された画像の出し分けimg 要素の srcset 属性を利用して画面サイズに合う画像を表示しているコンポーネントでは props の値から画像最適化に使用する URL を生成するnext.config.js でローダーを指定することで外部サービスを用いた画像最適化ができる画像最適化処理画像の最適化や形式の変更はクライアントのリクエストを元にバックエンドで行うサーバーとクライアント両方で最適化された…