Next.js에서 img tag 안 쓰고 Image Component 쓰는 이유

Next.js에서 img tag 안 쓰고 Image Component 쓰는 이유

 

Next.js는 정적인 자료들을 프로젝트 root의 public 디렉토리에 보관합니다. pages 디렉토리처럼 public 디렉토리 내부의 파일들은 Application에서 참조할 수 있습니다.

 

현재 public 폴더 아래 다음과 같이 구성이 되어 있습니다.

profile.jpg 이미지는 아래와 같이 생긴 이미지 입니다.

 

반응형

이걸 페이지에서 보려면 HTML에서는 img tag를 사용하면 됩니다.

일반적인 HTML 처럼 img tag를 사용해서 이미지를 띄울 수 있습니다. 하지만 이 이미지 소스는 최적화되지 않은 상태로 이미지를 사용하게 됩니다.

 

요즘 웹에서는 화면 크기에 따라서 이미지 크기가 반응하도록 하고, 최적화되어야 하며, viewport에 들어온 시점에 화면을 로딩을 하는 것을 매뉴얼처럼 다루고 있습니다. Next.js에서는 Image Component를 사용해 이러한 것들을 알아서 처리할 수 있게 해줍니다.

 

사용할 때는 Image 컴포넌트를 파일 최상단에 import 합니다.

Image 컴포넌트를 사용하고 img tag처럼 src, height, width 등을 속성으로 설정합니다.

결론은 Next.js에서는 이미지 리사이징 및 최적화를 해주기 때문에 img tag가 아닌 Image Component를 사용합니다.