image 컴포넌트
public 폴더안에 있는 파일은
/하고 파일 경로르 적으면 접근할 수 있다.
만약 public폴더안에 images라는 폴더를 만들고 이 안에 이미지 파일을 넣으면
test.js라는 페이지를 만들고 간단한 img태그로 만들어 준 후
/test로 들어가서 테스트해본다
Next.js에서 제공하는 이미지를 사용해보겠다.
이미지 컴포넌트를 사용하면 next.js서버를 한 번 거쳐서
최적화된 크기의 이미지를 가지고온다
알아서 이미지를 최적화해준다.
Next.js에서 제공하는 이미지를 사용해보겠다.
이미지 컴포넌트를 사용하면 next.js서버를 한 번 거쳐서
최적화된 크기의 이미지를 가지고온다
알아서 이미지를 최적화해준다.레이지 로딩을 지원해서 페이지로딩 속도도 최적화할 수 있다.
[id].js파일에서 img태그를 Image컴포넌트로 바꾸어주고
css를 적용해준다.
ProductList.js에서도 image 컴포넌트로 바꾸어주고 div태그로 감싸준다.
여기에서도 css를 적용해주어 포지셔닝해주었다.
확인해보면 오류가 난다.
Image 컴포넌트에 fill 속성을 써준다.
image컴포넌트를 사용할 때는 public폴더 내부에서 자유롭게 사용가능하지만
외부에 있는 이미지를 사용할 때는 따로 설정해주어야한다.
링크로 가서 설정값을 복사해준다.
수정한 후 next.config.js파일을 수정했으니 서버를 껐다가 킨다.
