NextJS에서 Image를 사용하는 이유

• 브라우저에서 필요에 따라 이미지를 최적화 해줌
• 사진의 품질을 75 %로 설정된 낮은 임계 값으로 자동 변경해줌

사용하기

// next.config.js 파일

const nextConfig = {
  images: {
    domains: ['도메인주소'], // 이미지가 외부 절대URL일 경우 반드시 필요함
  },
};

// 이미지 삽입할 컴포넌트 파일

import Image from 'next/image';

export default function Header() {

return (
	<Image
    src={'<https://도메인주소/users/jabae.jpg>'}
    alt='prfImg'
    width={300}
    height={250}
    layout='intrinsic'
  />
);
}

적용하기

// next.config.js 파일

const nextConfig = {
  images: {
    domains: ['도메인주소'],
  },
};

// Header.tsx 파일

import Image from 'next/image';
import styles from 'styles/Layout/Header.module.scss';

export default function Header() {

return (
	<div className={styles.userImage}>
    {userData.userImageUri && (
      <Image
        src={userData.userImageUri}
        alt='prfImg'
        layout='fill'
        objectFit='cover'
        sizes='20vw'
        quality='20'
       />
     )}
   </div>
);
}

layout='fill' objectFit='cover' 로 동그라미 안에 맞게 넣기

size quality 로 이미지 해상도를 더 낮춤

// common.scss

@mixin userImage($size) {
  position: relative;
  height: $size;
  width: $size;
  background: $dark-blue;
  border: solid 1px white;
  border-radius: 50%;
  img {
    border-radius: 50%;
  }
}

// Header.module.scss

.userImage {
      @include userImage(2.2rem);
      cursor: pointer;
    }

스타일을 입히기기 위해서는 상위에 클래스로 묶어주고 안에 img로 스타일링을 적용함

빌드에서 문제

// next.config.js 파일

const nextConfig = {
  images: {
    domains: ['도메인주소'],
    loader: 'akamai', 
    path: '',
  },
};

next/Image에서 임포트 하는 default loader가 next export에서 지원되지 않아서 생기는 문제로 loader만 지정해주면 된다.

next/image | Next.js

[React] NextJS 에서 이미지 import 하기

[내보내번] Next.js docs - next/image (v12.1.1)

Next 배포시 Image Optimization 에러