next.js 에서 image 불러오기

pages 폴더 안에있는 html 파일에서 public 폴더 안에 있는 이미지를 사용하려 할 때

기존 방식

<img src="../public/img/imagetest.png" />

next.js 에서 이 방식을 사용하면 이미지가 깨져서 보이지 않는다.

해결 방법

<img src="/img/imagetest.png" />

이런식으로 public 경로를 제외하고 적어주면 정상적으로 이미지가 출력된다.

Why?

• next.js 는 assets 파일을 불러올 때 자동으로 public 폴더부터 경로를 잡도록 되어있기 때문이다.