next Image 사용법-1

기존에는 img 태그를 이용해서 이미지를 보여주었지만,
next에서는 Image 컴포넌트를 제공해주고, 이점이 많아 이번에 기회에 정리하려고 한다.

Next/Image 기능

1. Lazy loading
2. 이미지 사이즈 최적화
3. placeholder 제공

Lazy loading

이미지 로드 시점을 필요할 떄 까지 지연 시키는 기술. 예를 들면 스크린 밖에 있는 이미지들은 로딩을 지연 시키고, 스크린 안에 있는 이미지만을 로드 시켜서 불필요한 사용을 줄이는 기술

img 태그에서는 lazy 옵셥을 추가하면 적용이 가능함
Next/Image 에서는 자동으로 적용 가능

이미지 사이즈 최적화랑 placeholder 는 다음편에서 다룰 예정

Next/Image 사용법

next.config.js 옵션 설정
리모트 이미지인 경우 next.config.js 파일에 명시를 해야 한다
이미지를 서빙하는 서버가 안전하다는것을 next.js에 알려줘야 하기 때문!

const nextConfig = {
  reactStrictMode: true,
  sassOptions: {
    includePath: [path.join(__dirname, 'styles')],
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.ap-northeast-2.amazonaws.com',
      },
      {
        protocol: 'https',
        hostname: 'gongpark-toyproject.s3.ap-northeast-2.amazonaws.com',
      },
    ],
    domains: ['https://s3.ap-northeast-2.amazonaws.com'],
  },
}

module.exports = nextConfig

자주 사용하는 layout 옵션
이미지 크기가 고정값이 아니고 반응형을 고려하는 경우 많이 사용함

(만약 이미지 크기가 고정값이라면 width, height 값을 반드시 명시해야한다)

<div className={styles.mainBanner}>
  <Image
    fill
    src={imgSrc}
    alt={'img'}
  />
</div>

.mainBanner {
  position: relative;
  width: 100%;
  aspect-ratio: 11/5;
}

참고 사이트

Next/Image 공식 문서
https://nextjs.org/docs/pages/api-reference/components/image

카카오 기술 블로그
https://fe-developers.kakaoent.com/2022/220714-next-image/