Zenn
🐾

【Next.js v13】next/imageについて

2023/01/01に公開
Next.js
idea

特徴

HTMLの<img>要素を以下の通り拡張する

  • サイズの最適化
    WebPやAVEFなどの最新の画像フォーマットを使用して、デバイスごとに正しいサイズの画像を自動的に提供する
  • 視覚的安定性
    画像が読み込まれているときにレイアウトのシフトを自動的に防止する
  • より高速なページ読み込み
    画像は、オプションのぼかしプレースホルダを使用して、ネイティブブラウザの遅延読み込みを使用してビューポートに入ったときにのみ読み込まれる

使い方

Imageタグのインポート

import Image from "next/image";

必要なprops

  • src
  • width
  • height
  • alt

その他のprops

  • loader
  • fill
  • sizes
  • priority
  • placeholder
  • style
  • onLoadingComplete
  • onLoad
  • onError
  • loading
  • blurDataURL

srcについて

  • ローカル画像の場合
  1. 画像ファイルをインポートして使用する
// 画像ファイルのインポート
import profilePic from '../public/me.png';
// srcプロパティの設定
src={profilePic}
  • リモート画像の場合
  1. srcプロパティにURLを文字列で指定する
  2. next.config.jsを設定する
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'ホスト名',
        port: '',
        pathname: 'パス名',
      },
    ],
  },
};

サイズ調整について

画像読み込みによるレイアウトシフトを防止するため、3つの方法のいずれかでサイズを調整する必要がある

  1. 静的インポートを行う
  2. widthとheightプロパティを設定する
  3. fillプロパティによって、親要素を満たすように展開させる

スタイリングについて

  • スタイリングにはclassNameかstyleを使用する（基本的にはclassNameがおすすめ）
  • fillプロパティを使う際は、親要素はposition:relativeとdisplay:blockである必要がある

Discussion