next.js 이미지 import 하기 오류해결

next.js 에서 이미지를 어떻게 import해와야 하나해서 찾아봤는데 생각보다 복잡했다.

첫번째방법으로 단순히 상단에서 이미지를 import해와서 img태그에 src에 넣어주면 될줄알았는데 오류가생겼다

Unexpected character '�' (1:0)

위의 오류가 나서 구글링 해보니 next.js 내에서 이미지 설정을 또 해줘야 하는거 같았다.
webpack에서 cofig.js 에서 url-loader를 따로 적용해줘야 하는것처럼 말이다.

npm i next-images

모듈을 설치후 
next.config.js 파일을 만들어서 아래 코드를 넣어주면 오류가 해결되었다

const withImages = require('next-images')
module.exports = withImages()

두번째 방법으로 next.js Image컴포넌트를 사용하는 방법이 있다.

import Image from 'next/image'

<Image src="/test.jpg" alt="test">

 
next10 버전 이후부터 사용가능한거 같은데 나는 9버전 사용중이라 이방법을 쓰진 않았다.
근데 찾아보니 Image 컴포넌트를 사용하면 이미지를 자동최적화 시켜주고 
이미지가 스크롤 될때 로드가 된다고 한다.

next10버전 이상을 쓰고있다면 Image컴포넌트 쓰는것이 훨씬 효율적인 방법이라고 생각한다.