next/image の local images と remote images の使い分け

next/image の画像の扱い方には、 import した StaticImageData を渡す "local images" と public ディレクトリ下に配置した画像のパス文字列を渡す "remote images" の2種類ある。

Taiga KIYOKAWA

Local Images

import profilePic from '../assets/me.png'

Next.js will automatically determine the width and height of your image based on the imported file. These values are used to prevent Cumulative Layout Shift while your image is loading.

Taiga KIYOKAWA

Remote Images

To use a remote image, the src property should be a URL string, which can be relative or absolute. Because Next.js does not have access to remote files during the build process, you'll need to provide the width, height and optional blurDataURL props manually:

import Image from 'next/image'

export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Taiga KIYOKAWA

Remote Images を使うタイミングとは？基本的に Local Images で良くない？

Taiga KIYOKAWA

public ディレクトリに置くべき画像とは

favicon
apple-touch-icon

Taiga KIYOKAWA

next/image は Layout shift を防ぐためにサイズを確定するように要求してくる。もしサイズが確定できなければ img タグと同等の動きをする。

Taiga KIYOKAWA

以下の3つのうちいずれか1つの方法でサイズを確定させる。

Automatically, using a static import
Explicitly, by including a width and height property
Implicitly, by using fill which causes the image to expand to fill its parent element.