Next.js에서 이미지 최적화는 어떻게 하나요?

Question

안녕하세요. Next.js를 공부하고 있는 학생입니다. Next.js에서는 이미지 최적화를 자동으로 해준다고 들었습니다. 이때에 어떤 방식으로 최적화가 이루어지는지, 별도의 설정이 필요한지 궁금합니다.

Answer 1

Next.js에서 이미지 최적화는 매우 간편해요.

기본적으로 Next.js는 'next/image' 컴포넌트를 사용해 이미지를 최적화합니다.

이 컴포넌트를 사용하면 자동으로 적절한 포맷과 크기로 변환되며,

브라우저의 화면 크기에 맞춰 이미지를 로드해 줍니다.

별도로 설정할 필요는 없지만,

이미지의 'src' 속성에 경로를 지정해 주면 됩니다.