오늘은
오늘은 Next.js에서 기본적으로 제공하는 Image 태그를 활용해 이미지 최적화를 진행하면서 겪은 트러블슈팅 경험을 공유합니다.
💡 문제 상황
처음에는 기본 img 태그를 사용해 아이템 목록 페이지를 구성했습니다. 그런데 페이지 이동이나 새로고침 시 600개가 넘는 모든 이미지를 한 번에 불러오는 문제가 발생했습니다. 😱
이건 성능에 매우 안 좋은 영향을 줄 수밖에 없기 때문에, 다음과 같은 개선점을 고민했습니다.
- lazy loading 적용 → 모든 이미지를 한 번에 불러오는 문제 해결
- Next.js의 Image 태그 도입 → 자동으로 lazy loading 및 이미지 크기별 최적화 제공
🔎 문제 해결 시도
Next.js에서 기본 제공하는 Image 태그를 사용하면 lazy loading이 기본적으로 적용되고, 자동으로 이미지 크기를 최적화해줍니다.
그래서 기존 img 태그를 Next.js Image 태그로 교체하고 다음과 같이 코드를 작성했습니다.
<Image
src={imageUrl}
alt={item.name}
width={48}
height={48}
/>
그러나... 이상한 에러가 발생하기 시작했습니다. 😵
처음엔 build 과정에서 문제가 생긴 줄 알고 build 후 start로 실행했지만, 이번엔 에러메세지가 아닌 이미지가 표시되지 않았습니다.
- 혹시 옵션이 잘못 들어간 건가?
- 혹시 이미지 링크가 잘못된 건가?
수많은 삽질 끝에 결국 해결되지 않았습니다. 😔
💥 문제 원인
결국 튜터님께 도움을 요청했습니다.
👉 dev 환경에서 띄워주는 에러메세지를 잘 보라고 하셨습니다.
👉 "Next.js에서는 외부 이미지 URL을 사용할 때 보안을 위해 next.config.mjs에서 허용된 도메인을 명시해야 한다"는 사실을 알려주셨습니다. 😳
👉 Next.js에서는 외부에서 이미지를 불러오려면 도메인 허용 설정이 필요합니다.
🚀 해결 방법
그래서 next.config.mjs 파일에 다음과 같은 설정을 추가했습니다.
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'ddragon.leagueoflegends.com',
port: '',
pathname: '/**',
},
],
},
};이렇게 설정하니 외부에서 불러오는 이미지가 정상적으로 출력되기 시작했습니다! 🎉
추가로 lazy loading까지 적용되어 더욱 향상된 UX제공이 가능해졌습니다!
✅ 깨달은 점
Next.js의 Image 태그는 성능 최적화 및 lazy loading이 자동 적용된다.
그러나 외부 이미지 URL은 next.config.mjs에서 허용된 도메인 설정이 필요하다.
에러가 발생하면 dev 환경에서 나오는 경고 메시지를 주의 깊게 살펴보자.
💡 정리
Next.js의 Image 태그는 성능 최적화에 강력한 도구입니다. 하지만 외부 이미지 허용 설정을 간과하면 에러가 발생할 수 있으니, next.config.mjs 설정을 꼭 확인하세요!
삽질은 성장의 발판이 된다. 🚀
