[넥스트(Next.js)]Next-Image

NextImge를 사용하는 이유?

이미지를 Next자체에서 최적화시켜 준다. 

 

장점

• Loder를 통해 url을 커스터마이징 할 수 있다.
• next.config.js를 통해 지정한 경로로만 이미지를 받아올 수 있어 악의적인 접근을 예방한다.
• 이미지 캐싱을 자동으로 해주며, expiration time(만료 시간) 설정이 가능하다. 
• 자동 스켈레톤 UI (placeholder를 통해) , CLS 방지 가능
• !! CLS? => 사이트가 loading 될 동안 height가 0이었다가 UI가 그려지면서 레이아웃이 흔들리는 현상.
• 자동으로 Lazy Loading(늦은 로딩)을 통해 이미지 최적화를 지원해 준다, pre-loading을 원하는 경우 취소 가능

 

필수 Props

1.src

정적 import 하는 이미지 파일에 경우 상관없으나 외부 URL을 사용하는 경우 next.config.js설정이 필요

2.width, height

넓이, 높이 값을 지정해 주어야 한다.

3.alt

이미지 대체 텍스트 (alt) 또한 필수 props.

 

옵셔널 Props

1. quality

1부터 100 사이의 숫자를 지정할 수 있고 높을수록 퀄리티가 좋아짐, default는 75

2. layout

이미지를 뷰포트(vh) 기준으로 어떤 사이즈로 출력을 할지 지정

3.loader

URL을 커스텀할 수 있는 함수를 가지고 src, width, quality를 props로 받고 url에 포함시켜 return 한다.

 

스타일링 방식

next/image 자체에 default로 지정된 스타일 때문에 스타일링이 쉽지 않다. 이는 많은 개발자들이 겪고 있는 문제인걸 stackoverflow에서도 확인할 수 있다. 이걸 해결하기 위해 next/image를 span으로 감싸고 span태그에 스타일을 입힌다.

 

 

Image src 외부경로 설정
Root경로의 next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets-global.website-files.com',
      },
    ],
  },
};

export default nextConfig;

//next/image의 Image import
//component src, alt, width, height 옵션 필수
import Image from 'next/image';
<Image src={image} alt="회사이미지" width={500} height={500} />