Next.js Image error 해결

문제

open api에서 가져온 이미지를 <img> 태그안에 두지 않고, next.js의 이미지 태그를 사용했다. <Image>
그런데, 아래와 같은 에러가 발생했다. !

Error: Invalid src prop (http://www.kopis.or.kr/upload/pfmPoster/PF_PF227003_231005_094454.gif) on next/image, hostname "www.kopis.or.kr" is not configured under images in your next.config.js
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

해결

error 메세지에서 들어가보라는 주소로 한번 들어가보자!
https://nextjs.org/docs/messages/next-image-unconfigured-host

특정 호스트에 대한 이미지 구성이 next.config.js 파일에 정의되지 않았을 때 발생한다고 적혀있다.

따라서, 이런식으로 코드를 작성해주었더니, 에러가 해결됐다!

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["www.kopis.or.kr"],
  },
};

export default nextConfig;