[Next.js] 이미지 다루기 & 최적화 하기

public 디렉토리에 있는 이미지 경로로 이미지 사용하기

public 디렉토리 안에 있는 파일들은 빌드하면 root 경로로 이동되기 때문에 이렇게 사용해도 문제 없습니다.

export default function List() {
  const goods = ['Tomatoes', 'Pasta', 'Coconut'];

  return (
    <div>
      <h4 className="title">상품목록</h4>
      {
        goods.map((v, i) => {
          return (
            <div key={i} className="food">
              <img src={`/food${i}.png`} className="food-img"/>
              <h4>{v} $40</h4>
            </div>
          );
        })
      }
    </div>
  );
}

하지만 이미지의 사이즈가 크거나 하는 경우에는 layout shift 현상이 발생할 수 있습니다.

 

layout shift 방지 + lazy loading + 사이즈 최적화 하기

layout shift란 이미지가 로딩이 좀 늦게 될 때 사이트의 layout이 밀려나게되는 현상을 말합니다.

 

이런 현상을 방지하려면 ‘<img />’태그 대신에 next에서 제공하는 ‘<Image />’를 사용하고, 이미지 파일을 import해서 넣어주게 되면 next.js가 이미지를 최적화 해주기 때문에 이런 문제들을 해결할 수 있습니다.

import Image from "next/image";
import Food0 from "/public/food0.png";

export default function List() {
  const goods: string[] = ['Tomatoes', 'Pasta', 'Coconut'];

  return (
    <div>
      <h4 className="title">상품목록</h4>
      {
        goods.map((v, i) => {
          return (
            <div key={i} className="food">
              <Image src={Food0} className="food-img" />
              <h4>{v} $40</h4>
            </div>
          );
        })
      }
    </div>
  );
}

 

하지만 만약에 ‘map()’ 함수를 통해서 각각 다른 이미지를 보여주고 싶은 경우에는 ‘require(’이미지 경로’)’같은 방법으로 사용해야 합니다.

import Image from "next/image";

export default function List() {
  const goods: string[] = ['Tomatoes', 'Pasta', 'Coconut'];

  return (
    <div>
      <h4 className="title">상품목록</h4>
      {
        goods.map((v, i) => {
          return (
            <div key={i} className="food">
              <Image src={require(`/public/food${i}.png`)} className="food-img" />
              <h4>{v} $40</h4>
            </div>
          );
        })
      }
    </div>
  );
}

 

또한 프로젝트 내부의 이미지가 아니라, 외부에서 가져온 이미지를 사용하는 경우에는 반드시 ‘width 와 height’값을 지정해줘야 합니다. 그리고 ‘next.config.js’에서 이미지를 가져올 사이트의 도메인을 등록하는 등의 설정을 해줘야합니다.

// next.config.js 파일

/** @type {import('next').NextConfig} */
const nextConfig = {
	// 추가
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'www.test.com',
        port: '',
        pathname: '/path/**',
      }
    ],
  }
}

module.exports = nextConfig