[Next] next/legacy/image 사용해보기

 

프로젝트 진행중에 eslint에게 Next/Image를 사용하라는 경고가 나왔는데요..

처음엔 img 태그를 쓰는데 굳이? 라는 생각으로 무시하고 넘어갔지만
하나 둘 늘어날수록 점점 거슬려져서 도입해보기로 하였습니다!

 

next/image?

next에 내장되어 img 태그를 대체하여 사용할수 있게 해주는데 정말 많은 기능을 지원하고 있습니다.

 

사실 이녀석도 img 태그 기반이라서 css 태그선택자로 img를 잡으면 같이 잡히긴 하는데..
대체 어떤 장점이 있길래 자꾸 사용하라고 하는것일까요?

 

next/image를 사용해서 얻는 장점은?

1. 자동으로 스켈레톤 UI를 지원해주고 CLS방지도 할수 있다. 
2. Lazy Loading 을 통해 이미지 최적화를 해주기도 하고 pre loading이 필요할경우 끌수도 있다. 
3. Loader를 통해 url커스텀이 가능하다.
4. 이미지의 캐싱과  expiration time 설정이 가능하다.
5. next.config 설정을 통해 지정된 곳에서 이미지를 받아오게 할수 있어 악의적인 요청을 막을수 있다. 

장점이 이렇게나 많지만 사용상에 알고 있어야될 내용도 많이 있는데요!
생각보다 Props가 참 많은 친구이기에 알아두면 좋을것 같습니다!

 

props

1. 필수
   - src (정적 import 파일, next.config에 지정된 외부 url)
   - width, height( layout fill또는 정적으로 import 되는 이미지를 제외한 모든 사용)
2. 옵셔널
   - layout (fill을 사용할땐 absolute 속성이 있기때문에 부모요소에게 position: relative를 꼭 주어야된다. )
   - loader
   - quality ( 1 ~ 100 사이의 숫자 지정, 기본 75 )
   - priority ( lazy loading을 사용하지 않는 요소일 경우 true로 해주면 된다. )
   - placeholder (blur, empty)

 

스타일링

next/Image 를 사용할땐 위에서 말한것처럼  img 태그로 지정하는 등의 방법으로
스타일링이 가능하지만, default로 지정된 스타일이 있기에

!important를 붙혀 우선순위를 부여해서 스타일링 할수 있습니다.

 

 

-------------------------- 추가 내용 --------------------------

 

Next.js 13버전 업데이트에 따라 아래와 같이 변경됨에 따라

블로그 글 제목을 변경 하였습니다. 

 

12버전
next/image

13버전
next/legacy/image