Next.jsでは、画像などの静的なファイルを、ルートディレクトリ内のpublicというフォルダに格納して提供することができます。

public内のファイルは、ベースURL（/）を起点にコードから参照することができます。

例えば、public/me.pngに画像を追加した場合、次のようなコードで画像にアクセスできます。

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />
}

export default Avatar


(公式のドキュメント参照)

nextjs.org

 

1 User

29 Pockets

Basic Features: Static File Serving | Next.js

https://nextjs.org/docs/basic-features/static-file-serving

Next.js allows you to serve static files, like images, in the public directory. You can learn how it works here.

また、Next.js 10 からは、Next.js Image Componentが追加されまして、

これは、ウェブ上での画像のパフォーマンスを向上させるソリューションです。

Next.js Image Componentは、基本的にはHTMLの<img>要素を簡単に置き換えることができ、現代のウェブのために進化したものです。

<img src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

↓

import Image from 'next/image'

<Image src="/profile-picture.jpg" width="400" height="400" alt="Profile Picture">

(公式ドキュメント)

nextjs.org

 

209 Pockets

Next.js 10

https://nextjs.org/blog/next-10#nextjs-image-component

Next.js 10 introduces Built-in Image Optimization, Internationalized Routing, Next.js Analytics, React 17 Support, and more!

next/imageコンポーネントを使用すると、画像は自動的にレイジーロードされます。つまり、ユーザーが画像を見ようとしているときにのみレンダリングされます。これにより、最初のビューポートの外側で30％の画像を読み込むことを防ぎます。

画像の寸法が強制的に設定されているため、ブラウザは画像を読み込んだときに画像が飛び込んでくるのではなく、画像に必要なスペースを即座にレンダリングし、レイアウトのずれを防ぎます。

HTMLの<img>要素の幅と高さは、レスポンシブレイアウトでは問題になることがありますが、next/imageを使用する場合はそのようなことはありません。next/image を使用すると、指定された幅と高さのアスペクト比に基づいて、画像が自動的にレスポンシブになります。

初期ビューポートにある画像をマークすることで、Next.jsが自動的に画像をプリロードすることができます。初期ビューポートに画像をプリロードすることで、Largest Contentful Paintでは最大50%の改善が見られました。

画像の自動最適化

このようにHTMLの<img>要素に比べて改善されたとはいえ、まだ大きな問題があります。2000×2000ピクセルの画像が、より小さな画像をレンダリングする携帯電話に送信されてしまうのです。

Next.js 10では、この問題も解決しています。next/imageコンポーネントは、ビルトインのImage Optimizationによって、より小さなサイズを自動的に生成します。

Built-in Image Optimizationは、ブラウザがサポートしていれば、JPEGよりも約30％小さいWebPなどの最新の画像フォーマットで画像を自動的に提供します。また、Next.jsは将来の画像フォーマットを自動的に採用し、それらのフォーマットをサポートするブラウザに提供することができます。

画像最適化は、あらゆる画像ソースに対応します。CMSのような外部のデータソースから送られてきた画像でも、最適化されます。

Next.js 10では、ビルド時に画像を最適化するのではなく、ユーザーからのリクエストに応じてオンデマンドで画像を最適化します。静的サイト・ジェネレーターや静的サイトのみのソリューションとは異なり、10枚の画像でも1,000万枚の画像でも、ビルド時間は長くなりません。

結論

新しい next/image コンポーネントは、ユーザーエクスペリエンスを大幅に向上させる強力な新しいプリミティブです。

next/imageコンポーネントは、自動遅延ロード、重要な画像のプリロード、デバイス間での正しいサイズ調整、最新フォーマットの自動サポートを行います。これらの機能は、あらゆるソースの画像に対応します。