Next.js ImageComponent 사용하기

<Image> 는 HTML의 <img> 태그에서 확장되어 built-in을 최적화하는 Next.js의 이미지 컴포넌트이다.

Next.js 공식문서에서 설명하는 <Image> 컴포넌트 사용의 의의는 아래와 같다.

• Improved Performance : modern image format을 사용해서 각각의 디바이스에 맞는 적절한 이미지 사이즈를 제공
• Visual Stability : Cumulative Layout Shift(누적 레이아웃 이동) 이 발생하지 않도록 안정성을 보장
• Faster Page Loads : 뷰포트에 들어갈때만 이미지가 로드된다.
• Asset Flexibility : remote 서버(클라우드, CMS 등)에 저장된 이미지도 리사이징이 가능

 

import Image from 'next/image'
import profile from "assets/icons/header/profile.png";

const Header = ({image}:{image:string}) => {
  return (
        <CustomImage src={image || profile} alt="" />
  );
};

const CustomImage = styled(Image)`
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  transition: all 0.125s ease-in 0s;
`;

 

 

 

https://abangpa1ace.tistory.com/242