[Next] 이미지 최적화 next/image

 

Next.js에서 아래 코드를 사용해서 이미지를 컴포넌트로 대체하면, 이미지를 로딩하고 표시하는 과정에서 성능을 향상시킬 수 있다.

Image 컴포넌트를 사용해서 SEO 최적화 하려면 width, height값을 꼭 입력해줘야한다. (alt 값은 필수)

width와 height 대신 props로 fill을 넣으면 이미지 크기를 몰라도 부모요소를 100% 채우도록 할지 여부를 true false로 지정한다.

import Image from 'next/image'

<Image src={hero} alt="hero" fill />

 

1. Next Image 장점

1. 이미지 최적화: 이미지가 webp 형식으로 변환되어 자동으로 최적화해서 다양한 화면 크기와 해상도에 맞게 제공하며 페이지 로딩 속도를 향상시킨다.
2. Lazy Loading: 페이지 초기 로딩 시 필요한 이미지만 로드, 나머지는 스크롤 할 때 로드 되게 한다.
3. 반응형 이미지: 다양한 화면 크기에 맞게 이미지를 자동으로 조정 후 표시한다.

 

2. 외부 이미지 불러오기

외부 이미지를 가져오기 위해 src에 그냥 외부 url을 넣으면 악의적인 공격 방지로 인해 오류가 발생한다.

그럴 땐 root에 있는 next.config.js 파일을 열어 등록된 도메인에 대해서만 이미지를 가져올 수 있게 설정해야한다.

images 객체의 domains 속성을 설정해서 이미지가 로드될 때 허용되는 도메인을 지정해주면 이미지를 불러올 때 최적화된 방식으로 처리할 수 있다. 

config파일을 수정했기 때문에 서버가 꺼졌을 텐데 다시 npm run dev로 실행시켜주면 외부 이미지도 잘 뜬다!

// next.config.js
const nextConfig = {
  images: {
    domains: ["example.com"],
  },
};