Do not use <img>. Use Image from 'next/image' instead.

React & styled-components

react와 styled-components를 활용해서
이미지 태그를 다룰 때는 보통 아래와 같이 활용했다.

import styled from 'styled-components';

const Wrapper = styled.div``;
const Imga = styled.img``;

export default function Home() {
  return (
  	<Wrapper>
    	<Img />
    </Wrapper>
  );
}

Next.js

export default function Home() {
  return (
  	<div>
    	<img src="이미지경로" alt="" />
    </div>
  );
}

위의 코드와 같이 사용하려 하니 아래 사진에 나와 있는 오류가 발생했다.

해결방법

코드에 문제가 없어보이는데 왜 이런 오류가 발생하는지 궁금해서 Next.js공식홈페이지에 들어가 확인해보았다.

Why This Error Occurred
An HTML img element was used to display an image. For better performance and automatic Image Optimization, use Next.js' built-in image component instead.
https://nextjs.org/docs/messages/no-img-element#why-this-error-occurred

더 나은 성능과 이미지 최적화를 위해 Next.js의 built-in image component를 이용하라고 안내되어 있었다. 공식홈페이지에 안내되어 있는 코드대로 작성해주면 이전에 발생한 오류는 해결된다!

import Image from 'next/image'

function Home() {
  return (
    <>
      <Image
        src="https://example.com/test"
        alt="Landscape picture"
        width={500}
        height={500}
      />
    </>
  )
}

export default Home