NextJs_img 에러 핸들링

• 오류메세지
  Using <img> could result in slower LCP and higher bandwidth. Consider using <Image /> from next/image to automatically optimize images. This may incur additional usage or cost from your provider. See: https://nextjs.org/docs/messages/no-img-element

img 태그를 쓰기보다 next.js 에서 제공해주는 이미지 컴포넌트를 쓰면 이미지 성능에 최적화된다고 eslint에서 경고를 보여주는 것!

import Image from "next/image"로 불러오고
위와 같이 설정했다.

Image를 쓸 때 width, height은 필수적으로 들어가야 하니 주의할것!

그리고 실행해봤더니 에러가 뜬다.

다음/이미지, 호스트 이름 "image.tmdb.org"가 next.config.js의 이미지 아래에 구성되어 있지 않습니다.

next.js 홈페이지에 들어가서 확인해보니

넥제 해당 오류 확인 페이지

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

여기에 해당 모듈을 추가해놓으라는거같다.

next.config.mjs에 들어가서 "image.tmdb.org" 이 부분 추가하면 될듯

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "image.tmdb.org",
        port: "",
        pathname: "/**",
      },
    ],
  },
};

export default nextConfig;

이런식으로 hotname에 해당 주소를 추가하고 실행하면

위와 같은 방법으로 하니 잘 나오는걸 확인할 수 있었다