2020/10/27にNext.js 10がリリースされました。変更点は公式のブログがとても分かりやすくまとまっています。Next.js Confの動画をチェックするのも良いかもしれません(演出が良い感じです)。 Next.js 10で特に注目すべきは、画像最適化をしてくれるnext/imageコンポーネント(next/image)のビルトインサポートだと思います。この記事ではnext/imageについてまとめます。 next/imageとは next/imageは、画像の表示を最適化してくれるコンポーネントです[1]。 画像の最適化 具体的には、以下のような最適化を行ってくれます。 画像を閲覧デバイスに応じてリサイズして表示してくれる(元画像が大きくともスマホでは小さくリサイズされた画像を表示) PNGやJPEGなどの形式の画像を自動でWebPにしてくれる(しかもWebP対応ブラウザでの