[Bug] next build 시 뜨는 warning 해결

[jwo1024]

• 적용 페이지 : 전체

버그 내용

• 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 @next/next/no-img-element
• Warning: React Hook useEffect has a missing dependency: 'oauth'. Either include it or remove the dependency array.
• cookie 를 서버 사이드에서 불러오는 문제

기타

[jwo1024]

해결 commit : 9a4a159e0ebc32618adf35ebee812c0d6c8a3a2f

[jwo1024]

버그

• Error: Invalid src prop (https://picsum.photos/200/300) on `next/image`, hostname "picsum.photos" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

해결

• next.config.mjs 에서 아래 코드 추가

  const nextConfig = {
  images: {
  domains: ["picsum.photos"],
  },
  };

[jwo1024]

버그

• Unhandled Runtime Error Error: Image with src "/icon/home_plain.svg" is missing required "width" property.

해결

• Sidebar.tsx , /app/cardslide/page.tsx

  export default function Sidebar() {
  // Image 의 필수 요소 때문에 width, height 를 지정해 주었지만, 영향을 미치지 않습니다.
  const size = 300;
  return (
  <section className={styles.container}>
    <div></div>
    <button className={styles.button}>
      <Image
        src="/icon/home_plain.svg"
        alt="Home Icon"
        className={styles.icon}
        width={size}
        height={size}
      />

[jwo1024]

해결 commit : 3fb61e7121c62d7bddfd2a6163ff4ab72a232e8d