Next.js의 <Image> 컴포넌트는 기본 HTML <img> 요소를 확장하여 다음과 같은 기능을 제공한다.

• 사이즈 최적화 (Size optimization): WebP와 같은 최신 이미지 형식을 사용하여, 각 장치에 적절하게 크기가 조정된 이미지를 자동으로 제공한다.
• 시각적 안정성 (Visual Stability): 이미지가 로딩될 때 발생하는 레이아웃 이동을 자동으로 방지한다.
• 더 빠른 페이지 로드 (Faster page loads): 기본 브라우저의 지연 로딩을 사용하여 이미지가 뷰포트에 들어올 때만 로드하며, 필요에 따라 blur-up placeholder를 제공한다.
• 에셋 유연성 (Asset Flexibility): 원격 서버에 저장된 이미지까지도 요청 시 크기를 조정한다.

<Image> 사용을 시작하려면, next/image 에서 이를 import하고 컴포너늩 내에 렌더링하자.

• app/page.tsx

  import Image from 'next/image'
   
  export default function Page() {
    return <Image src="" alt="" />
  }
  

src 속성에는 로컬 또는 원격 이미지를 사용할 수 있다.

시청각 자료: next/image 사용 방법에 대해 더 알아보자 → YouTube (9 minutes)

1. 로컬 이미지 (Local Images)

정적인 파일(static files)들, 예를 들어 이미지나 폰트 같은 파일들은 프로젝트의 루트 디렉터리에 있는 public 이라는 이름의 폴더 아래에 저장할 수 있다.

public 폴더 내의 파일들은 기본 URL(/)부터 시작하여 코드에서 참조될 수 있다.

• app/page.tsx

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

이미지를 정적으로 import하는 경우, Next.js는 이미지의 고유한 width 와 height 를 자동으로 결정한다.

이 값들은 이미지 비율을 결정하고, 이미지가 로딩되는 동안 누적 레이아웃 이동(Cumuldative Layout Shift)이 발생하는 것을 방지하기 위해 사용된다.

• app/page.tsx

  import Image from 'next/image'
  import ProfileImage from './profile.png'
   
  export default function Page() {
    return (
      <Image
        src={ProfileImage}
        alt="Picture of the author"
        // width={500} automatically provided
        // height={500} automatically provided
        // blurDataURL="data:..." automatically provided
        // placeholder="blur" // Optional blur-up while loading
      />
    )
  }
  

2. 원격 이미지 (Remote Images)