[Next.js] Image 컴포넌트

Image

1. lazy loading 을 지원하여 해당 이미지가 필요한 순간에 불러오기 때문에 초기 로딩 속도가 빨라진다

2. 이미지 크기 최적화

• 크기를 반드시 지정해주어야 한다

import Image from 'next/image'

export default function Product(){
	return (
      <>
    	<Image src="/images/product.png" width={200} height={300} alt="상품 이미지" />
      </>
    )
}

• 반응형으로 하고 싶은 경우 부모 요소에 position: relative로 포지셔닝하고 <Image > 태그 에는 fill 속성을 적용해서 부모 요소를 꽉 채울 수 있다.
  ( fill을 사용하면 position: absolute 포지션으로 배치되기 때문에, "가장 가까운 포지셔닝이 된" 조상 요소에 꽉 차도록 이미지가 배치)

  • 이 때 이미지의 가로/세로 비율이 깨지지 않도록 하려면 objectFit: cover

import Image from 'next/image'

export default function Product(){
	return (
      <div style={{position: 'relative', width: '50%', height: '200px' }}>
    	<Image fill src="/images/product.png" alt="상품 이미지" style={{objectFit: 'cover', }} />
      </div>
    )
}

next.config.js

3. public 폴더 외, 외부의 이미지를 src 주소로 받을 때에는 next.config.js파일에 images 설정을 해줘야 한다.

🔗 Next.js 공식문서 : next/image Un-configured Host

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com', // 사용하는 url의 호스트 주소(앞부분)
        port: '',
        pathname: '/account123/**', // 끝의 `**` 는 하위 모든 경로를 포함한다
      },
    ],
  },
}

next.config.js 파일을 수정하면 서버를 껐다가 다시 켜야한다

참고: 🔗 코드잇 Next.js로 웹사이트 만들기