【Next.js】Local ImagesとRemote Imagesの違い

Local Images

.jpg, .png, .webpのいずれかのファイルをimportします。

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
    />
  )
}

上記の方法で src を記述すると画像の widthと height は自動的に決定されます。
また、blurDataURL も自動で設定され、 placeholder を blur に設定するだけでプレースホルダーが表示されるようになります。

以下は placeholder　を　blurに設定した場合のデモページです。

Remote Images

srcにURL文字列を記述します。

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Local Images とは異なり、 width や height は自動計算されないため、必ず指定する必要があります。
また、 placeholder　を blur に設定する場合には blurDataURL　を指定しなければなりません。

外部画像を使用するには next.config.js に remotePaterns　を追記する必要もあります。

next.config.js

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}