Next.js の Image コンポーネントでローカル画像を表示する

Image コンポーネントでローカル画像を扱う利点

Next.js の <Image> コンポーネントを使うと、こんなメリットがあります。

• 自動最適化: 画像はビルド時に自動で最適化されるので、無駄なデータを削ぎ落として、ページの読み込み速度がアップします。
• 自動幅と高さの設定: インポートされた画像から幅と高さを自動で計算してくれるから、累積レイアウトシフト（CLS）を防いで、ページがガタガタしない。
• レスポンシブ対応: デフォルトでデバイスに合わせて最適な画像を表示してくれるので、いろんな画面サイズにピッタリ合った画像が自動的に選ばれます。

画像のインポート

画像をインポートするだけで、width や height の指定は不要です。Next.js がインポートした画像の情報を使って、自動で設定してくれます。

公式サイトの一部を意訳すると、こんな感じです。

Next.js はインポートされたファイルに基づいて画像の実際の幅と高さを自動で決定します。この情報を使って画像の比率を保持し、読み込み中の累積的なレイアウトシフト（CLS）を防ぎます。

例えば、以下のように静的な画像をインポートする場合、<Image> コンポーネントを使うと、幅や高さを指定しなくても画像を簡単に表示できます。

Dynamic Import の注意点

警告: 動的な await import() または require() はサポートされていません。インポートはビルド時に解析できるように静的である必要があります。

これは、Next.js がビルド時に画像ファイルを解析し、その情報を使って最適化するためです。だから、動的に画像をインポートすることはできず、すべての画像は静的にインポートする必要があります。

priority プロパティの使用

priority プロパティを使うと、ファーストビューで表示されるような重要な画像を優先的に読み込むことができます。これでユーザーが最初に見るコンテンツの読み込みが早くなり、より良い体験を提供できます。

• priority プロパティ: ファーストビューに表示する重要な画像には、これを設定することで、優先的に画像を読み込ませます。

レスポンシブ画像の実装

Next.js の <Image> コンポーネントは、レスポンシブ画像にも対応しています。例えば、fill プロパティを使うことで、親要素のサイズに基づいて画像を調整できます。

• layout="fill": 画像が親要素の大きさにフィットするように調整されます。
• objectFit="cover": 画像を親要素に合わせてトリミングし、全体をカバーするように表示します。

まとめ

Next.js の <Image> コンポーネントを使えば、画像の最適化、自動での幅・高さの設定、レスポンシブ対応など、便利な機能が盛りだくさん。ローカル画像を静的にインポートするだけで、ページのパフォーマンスを大幅に向上させ、ユーザーにとっても快適な体験を提供できます。priority や layout プロパティを活用して、もっと効率的に画像を管理してみましょう！