`next/image` Un-configured Host

개인과제 진행 중 롤 챔피언의 이미지를 가져오기위해서 아래와 같이 코드를 작성했으나 오류가 발생했다.

오류 메세지를 읽어보니 src의 호스트 주소 ddragon.leagueoflegends.com 가 next.config.js 파일에 설정되어 있지 않아서 발생한 문제인 것 같았다.

<Image
  src={`https://ddragon.leagueoflegends.com/cdn/14.19.1/img/champion/${champion.image.full}`}
  alt={champion.name}
  width={50}
  height={50}
 />

 

오류 메세지에 조회되는 nextjs docs에 들어가보니 에러가 발생하는 이유와 고칠 수 있는 방법을 확인할 수 있었다.

https://nextjs.org/docs/messages/next-image-unconfigured-host#possible-ways-to-fix-it

Why This Error Occurred
One of your pages that leverages the next/image component, passed a src value that uses a hostname in the URL that isn't defined in the images.remotePatterns in next.config.js.

Possible Ways to Fix It
Add the protocol, hostname, port, and pathname to the images.remotePatterns config in next.config.js

// next.config.js
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        port: '',
        pathname: '/account123/**',
      },
    ],
  },
}

 

내 코드의 next.config.mjs파일에서 images.remotePatterns 구성에 프로토콜, 호스트 이름, 경로 이름을 추가해주었더니 이제 이미지가 잘 불러와진다.!

 

적용한 next.config.mjs파일

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "ddragon.leagueoflegends.com",
        pathname: "/cdn/**", // `cdn` 아래의 모든 경로
      },
    ],
  },
};

export default nextConfig;