db에 이미지 URL을 넣으면, 에러가 난다

왜? 이미지를 최적화해야하는데, 비용이 들기 때문!!

그래서?

NextJS에게 특정 host url을 최적화하도록 허용해주어야한다. 비.용.절.감.

• NextJS의 Image는 이미지를 자동으로 최적화를 해 주어 성능을 향상시키고 빠른 로딩이 되도록 해 준다.
• 하지만 외부 호스트의 이미지(다른 사이트의 이미지 링크 등)를 불러올 때는 보안 상의 이유로 이 기능이 허용되지 않는다.
• 따라서 next.config.mjs에서 hostname들을 등록해 주어야 한다.
• (nextConfig > images > remotePatterns > hostname)

next.config.mjs

const nextConfig = {
  images: {
    remotePatterns: [
      {
        hostname: "avatars.githubusercontent.com"
      }
    ]
  }
};

export default nextConfig;

Pagination Actions