지난 번에 NextJS의 Image에 대한 포스팅을 했다. 이 포스팅은 그 포스팅의 2탄으로 외부 이미지 소스를 사용할 때 발생할 수 있는 이슈에 대한 것이다.

UI만 집중해서 Next.js의 Image를 사용할 때는 public 폴더에 있는 이미지를 사용했다. db를 연결하고 db에 있는 imgURL을 통해 이미지를 불러 오는 순간 아래와 같은 이슈가 발생했다.

이슈!

Next.js의 Image 컴포넌트는 기본적으로 외부 이미지 소스를 허용하지 않는다고 한다. 따라서 아무런 조치 없이 외부 URL을 사용하면 아래와 같은 오류 메시지를 볼 수 있다.

import Image from 'next/image';

export default function Example() {
    return (
        <Image
            src="https://example.com/image.jpg"
            width={500}
            height={300}
            alt="Example"
        />
    );
}

Error: Invalid src prop ("https://example.com/image.jpg") on `next/image`, hostname "example.com" is not configured under images in your `next.config.mjs`.

remotePatterns 설정을 해줘야 하는 이유

1. 보안 강화

   무분별하게 외부 이미지를 허용하면 악성 콘텐츠를 포함한 이미지가 로드될 가능성이 있다. 이를 방지하기 위해 허용된 도메인을 명시적으로 지정한다.

2. 성능 최적화

   Next.js의 Image 컴포넌트는 외부 이미지를 로드할 때 내부적으로 최적화 처리를 적용한다. 이를 위해, 허용된 도메인만 최적화 대상에 포함할 수 있다.

   최적화는 비용 (컴퓨팅 파워)가 필요하다. 만약에 아무 URL이나 허용한다면 악성 유저가 고용량의 이미지를 이용해서 나의 지갑을 털어갈 수도 있다…

3. 의도하지 않은 에러 방지

   허용되지 않은 도메인의 이미지를 로드하려고 하면 오류가 발생하기 때문에, 문제가 될 수 있는 이미지를 사전에 걸러낼 수 있다.

next.config.mjs에서 이슈 해결 하기

아래와 같이 원하는 hostname과 protocol 등 기타 옵션을 정의해주면 Image에서 사용할 수 있다.

// next.config.mjs
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '', // 포트가 없다면 생략 가능
        pathname: '/**', // 모든 경로 허용
      },
    ],
  },
};

export default nextConfig;