Next.js 13 - next/image

랜딩 페이지 : index.tsx

next/image

img 태그 대신에 next/image 사용하기

import Image from 'next/image';
import fileName from '/public/fileName.jpg';  // 이미지를 static하게 import

<Image
	src={fileName}
	quality={100}  // default : 75
	placeholder="blur"  // (production 환경에서)사진이 다운로드 되는 동안 blur 이미지가 자동으로 적용됨
/>

=> webp type의 이미지 다운로드(네트워크 탭 통해 확인 가능) : 자동으로 이미지 용량 최적화 (원본보다 훨씬 더 작은 용량)
quality 속성 사용하여 얼마나 최적화할지 설정 가능

• src가 static하게 import된 이미지일 경우(public 폴더 내에 있는 파일)
  : 빌드 타임에 이미지의 정보(ex. 너비와 높이)를 알 수 있으므로 미리 최적화

• src가 외부 링크에 있는 파일일 경우
  : 외부 이미지의 높이와 너비를 미리 알 방법이 없으므로 빌드 타임에 미리 최적화 불가 -> width, height 속성 필수 (주어진 너비, 높이에 맞춰서 정적으로 이미지 최적화 가능하도록)
  • 이미지를 static하게 import 하지 않고 파일의 경로로 src를 작성한 경우 외부 링크로 인식함

• 외부 링크로 import 했지만 width와 height 사이즈 모르는 경우
  : fill 속성 채워주면 해당 이미지의 사이즈를 부모에 의해 결정
  • 부모의 position을 relative/absolute/fixed 등으로 설정하고 부모의 사이즈 설정하면 똑같이 렌더링
  • 사진이 납작하게 나오는 것이 싫을 경우, style={{ objectFit: 'cover' }} 추가

+) 외부 링크 허용 - next.config.js

module.exports = {
  images: {
    domains: ['assets.acme.com'],
  },
}

공식 문서 참고 - Domains

Image 컴포넌트 : 자동으로 lazy loading 적용
cf) img 태그 : loading="lazy" 작성해서 네트워크 절약 가능

cf) 버전 12의 next/legacy/image는 span 태그가 추가적으로 생성되기 때문에 사용성이 좋지 않음 -> Next.js 13에서 개선

next/image 정리

• webp로 용량 최적화
• blur 이미지 자동으로 생성
• layout shift 현상을 자동으로 막아줌
• lazy loading 지원