[Next.js] Image

로컬 이미지(jpg, png, webp...)를 사용하려면 해당 이미지의 경로로 import해오면 된다.

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

Next.js는 가져온 파일에 따라 이미지의 너비와 높이를 자동으로 결정하며 이 값은 이미지가 로드되는 동안 누적 레이아웃 이동을 방지하는데 사용된다.

import Image from 'next/image'
import profilePic from '../assets/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src={profilePic}
        alt="Picture of the author"
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

원격이미지를 사용하려면 src 속성이 상대적이거나 절대적인 URL 문자열이어야 한다.
Next.js는 빌드 프로세스 중에 원격 파일에 액세스할 수 없으므로 너비, 높이 및 선택적 blurDataURL props를 수동으로 제공해야 한다.

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>
    </>
  )
}