next.js 리스트 렌더링 오류, 이미지 소스

문제상황
next.js 프로젝트에서 아래와 같은 코드로 리스트를 렌더링하려고 했다.

{list.map((item: Item) => (
          <TradeStateCard key={item._id} item={item} />
        ))}

그러자 아래와 같은 오류가 뜬다.

Unhandled Runtime Error
Error: Invalid src prop (https://cdn.cetizen.com/CDN/market/market_large_crop/202203/20220318/220318152808_1_2913635.jpg) on `next/image`, hostname "cdn.cetizen.com" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

이해
대충 에러코드를 읽어보면, "해당 호스트명"이 next.config.js에 설정되어있지 않아서 생기는 문제 같다.
Next.js에서는 이미지 호스트명을 설정해야 하는데 그이유는 보안 및 성능 관련 이유로, 외부 호스트에서 이미지를 가져오는 것을 제한해야 하기 때문이란다.

해결
그러면 이제 아래와 같이 next.config.js에서 설정을 해주면 문제가 해결이 된다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['cdn.cetizen.co'],
  },
}