NextJS
next.config.js에서 remotePatterns까지 셋팅해줬는데!!!
Image 태그 src에 도메인주소를 넣으면 이미지가 안나오신다면 Loader를 사용하셔야 합니다!
(Solution code)
const src = `${API}/user/photo/${blog.postedBy.username}`;
<Image loader={() => src} src={src} width={500} height={500}/>
Next.js에서 이미지 로더(Loader) 이해하기
Next.js에서 이미지 로더(Loader)가 어떻게 동작하는지에 대해 알아보겠습니다. 특히, 이미지 최적화와 관련된 부분을 중점적으로 다뤄보겠습니다.
이미지 로더(Loader)란 무엇인가?
Next.js에서 이미지 로더는 이미지의 URL을 생성하는 함수입니다. 기본적으로 제공된 src 값에 루트 도메인을 추가하고, 다양한 크기의 이미지를 요청하기 위한 여러 URL을 생성합니다. 이러한 URL들은 자동으로 srcset 속성을 생성하는 데 사용됩니다. 결과적으로, 사이트 방문자에게 그들의 뷰포트에 맞는 적절한 크기의 이미지가 제공됩니다.
왜 이미지 로더가 중요한가?
이미지 로더가 중요한 이유는 최적화된 이미지를 제공함으로써 웹사이트의 성능을 향상시키기 때문입니다. 예를 들어, 데스크탑 사용자는 고해상도 이미지를 필요로 하지만, 모바일 사용자는 저해상도 이미지를 필요로 할 수 있습니다. 이미지 로더는 각 사용자의 뷰포트 크기에 맞는 이미지를 제공하여, 불필요한 데이터 전송을 줄이고 로딩 속도를 빠르게 합니다.
이미지 로더의 동작 원리
이미지 로더는 기본적으로 다음과 같은 단계를 거칩니다:
- 루트 도메인 추가: 제공된 src 값에 루트 도메인을 추가합니다.
- 여러 URL 생성: 다양한 크기의 이미지를 요청하기 위한 여러 URL을 생성합니다.
- 자동 srcset 생성: 생성된 여러 URL을 사용하여 srcset 속성을 자동으로 생성합니다.
- 적절한 이미지 제공: 사용자의 뷰포트 크기에 맞는 적절한 크기의 이미지를 제공합니다.
결론
Next.js의 이미지 로더를 사용하면 각 사용자에게 최적화된 이미지를 제공할 수 있어 웹사이트의 성능을 크게 향상시킬 수 있습니다. 로더는 다양한 크기의 이미지를 자동으로 생성하고, 이를 srcset 속성에 적용하여 뷰포트에 맞는 이미지를 제공합니다.
여러분의 Next.js 프로젝트에 이미지 로더를 도입해보고, 웹사이트 성능이 어떻게 개선되는지 직접 확인해보세요. 이 글이 도움이 되셨다면 좋겠습니다. 더 궁금한 점이 있으시면 댓글로 남겨주세요. 행복한 코딩 되세요! 🚀
