2. Next.js 이미지 최적화

1. 최적화 방법

• lazy loading
• 사이즈 최적화
• layout shift방지
  *layout shift: 이미지 로딩이 늦게 돼서 레이아웃이 조금 밀려나는 현상

1) image import

(1) 로컬에서의 이미지

import Image from 'next/image'

  <Image src="/food0.png" className="food-img" alt="설명" />

(2) 외부에서의 이미지

‹Image src="https://s3.amazonaws.com/
my-bucket/profile.png" width={} height={}/>

- 외부 경로에서 가지고 올 땐 무조건 width와 height를 가지고 와야한다

- 그리고 https://beta.nextjs.org/docs/optimizing/images#remote-images 이 링크처럼 설정이 필요