[NEXT.js] next/image 호스트 구성 에러 해결

Next.js에서는 이미지를 로드하기 위한 next/imgage 컴포넌트를 지원한다.
next.image는 지연 로딩(lazy loading)을 지원하며 그 밖의 다양한 props를 지원한다.

next.js 13 버젼을 이용해서 프로젝트를 하던 중 카카오 버튼 이미지를 로드하기 위해 카카오 홈페이지의 이미지 주소를 src로 지정했는데 다음과 같은 에러가 났다.

next/image는 외부 이미지를 로드하기 위해 src 주소를 서버로 지정하면 next.config.js 파일에 remotePattenrs 프로퍼티를 구성해주어야 하며, 이는 악의적인 사용자로부터 내 어플리케이션을 보호하기 위함이라고 Next.js 공식 홈페이지에 명시되어 있다.

해당 오류는 next.config.js에 다음과 같이 호스트를 구성하여 해결할 수 있다. 이해가 쉽도록 프로젝트에서 직접 쓰고 있는 코드를 가져왔다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: { styledComponents: true },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'developers.kakao.com',
        port: '',
        pathname: '/assets/img/about/logos/kakaolink/**',
      },
    ],
  },
};

module.exports = nextConfig;

Next.js 12.3 이전 버젼은 다음과 같이 해결할 수 있다.

const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  compiler: { styledComponents: true },
  images: {
        domain: 'developers.kakao.com',
  },
};

module.exports = nextConfig;

근데 나는 그냥 이미지 직접 다운받아서 로컬에서 가져오는 걸로 에러 해결함ㅎ

참고
https://nextjs.org/docs/messages/next-image-unconfigured-host
https://nextjs.org/docs/api-reference/next/image