시작

노마드코더를 통해 Next.js14 버전을 학습하고 있다.

next.js에서 img태그를 사용하면 Image태그 사용을 권장하고 있는데 이에 대해 알아보자.

---

이미지 최적화

• <img/>태그를 사용할 경우 Eslint는 <Image /> 사용을 권장한다.

그럼 Image태그를 사용하는 경우 어떤 부분에서 좋은지 알아보자.

Image 태그를 사용할 경우

이 3가지는 React에서 개발자가 따로 설정해줘야하는 점이다.

• lazy loading
  - lazy loading은 뷰 포트 밖에 있는 이미지들의 로딩을 지연시켜준다.
• 이미지 사이즈 최적화 (srcSet 제공)
• placeholder 제공 (Layout Shift방지)
  - Layout Shift : 페이지 로딩 시 이미지 영역에 이미지가 생성되면 이전에 있던 컨텐츠들이 하단으로 밀려나는 현상을 말한다.

적용하기

Image import

import Image from "next/image";
.
.
.
const MovieInfo = async ({ id }: { id: string }) => {
  const movie = await getMovise(id);
  return (
    <div className={styles.container}>
			<Image src={movie.poster_path} alt={movie.title} width={780} height={780} className={styles.poster} />
    </div>
  );
};

export default MovieInfo;

• 적용하기 위해선 Image를 import해야한다.
• 이미지 경로 또한 import하는 방식으로 불러와야 최적화를 할 수 있다.
• 만약, 외부에서 받아오는 이미지를 사용할 경우 width, height 속성을 필수적으로 지정해 줘야 한다.

next.config.mjs 설정

외부에서 받아오는 이미지의 경우 next.config.js에 따로 설정을해야 한다. (안그럼 에러남)

//next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['image.tmdb.org'],
  },
};

export default nextConfig;

🤔 의문점

그렇다면 반응형일 경우 어떻게 해야하지?

주로 외부 이미지를 사용하는 경우가 다수이며, 반응형은 기본적으로 진행된다.
따라서 Image 태그에 사이즈를 고정할 경우 반응형 작업에 지장을 준다.

해결방안 (fill 사용)

• Image 태그에는 다양한 속성이 존재한다.
• next.js13 버전 이전에는 layout과 objectFit을 사용했다고 한다.
• 13버전 이후에는 주로 fill 속성을 사용한다고 한다.

fill 속성?

• 부모 요소의 속성을 기반으로 조정한다.
• fill 속성을 사용하기 위해서는 부모 요소가 이미지를 감싸고 있어야한다.
• 부모 요소에는 position: relative 속성, 사이즈 등이 있어야한다.

fill 속성 기본 스타일 확인하기

position: absolute;
height: 100%;
width: 100%;
inset: 0px;
color: transparent;

• fill 속성은 absolute 속성 기본으로 설정되어 있기 때문에 단독으로 사용할 수 없다.
• 그렇기에 부모 요소가 필연적으로 존재해야한다.
• 또한 부모 요소가 기준이 되도록 relative 속성은 필수로 있어야한다.

반응형에 맞게 수정하기

import Image from "next/image";
.
.
.
const MovieInfo = async ({ id }: { id: string }) => {
  const movie = await getMovise(id);
  return (
    <div className={styles.container}>
      <div className={styles.imgWrap}>
        <Image src={movie.poster_path} alt={movie.title} fill className={styles.poster} />
      </div>
    </div>
  );
};

export default MovieInfo;type

• fill속성을 사용할 경우 굳이 width, height 속성을 추가할 필요가 없다.
• 부모요소(div)로 Image태그를 감싸준다.

.imgWrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

• 부모요소에 relative, 반응형을 위해 사이즈를 조정해 줬다.
  - 반응형으로 사용해야하기에 너비, 높이는 100%으로 지정했다.

✨ 완성

---

마치며

React기반으로 프로젝트를 진행하다 이번 노마드코더를 통해
Next.js14버전을 접하게 되었다.

이 두가지의 가장 큰 차이점은 라이브러리, 프레임워크에 있지 않을까 싶다.

Next.js는 Next.js에서 요구하는 규칙에 맞게 사용자(개발자)가 작업만해주면 된다.

물론 단점(폴더 구조 등...)도 존재하지만 React만 접해본 나로서 현재는 좋은 것 같다.

참고
Next/Image를 활용한 이미지 최적화
[Next.js] 왜 새로워진 next/Image는 더이상 objectFit을 필요로 하지 않게 됐을까?