Next.js에서 svg 파일을 사용하며 겪은 일

 

이번 글은 제가 부트캠프에서 위클리 미션을 수행하며 리액트 프로젝트에서 Next.js로 마이그레이션을 하던 중 svg 관련 문제가 발생하여 적었던 에러로그입니다.

---

😭 Error

import searchImg from '@/public/assets/images/search.svg';
//..
return (
	<>
		<Image src={searchImg} alt="검색 돋보기 아이콘" width={16} height={16} />
	</>
);
  

 

위와 같이 기존 리액트 프로젝트에서 사용했던 방법인 import를 사용하여 Image 컴포넌트를 사용했을 때, 이미지가 깨지는 현상이 발생하였습니다.

 

🥹 Solution 아닌 Solution..

//사진이 정상적으로 불러와지는 방식
<Image src='/assets/images/search.svg' alt="검색 돋보기 아이콘" />

 

위 코드처럼 Image 컴포넌트에 직접 이미지 경로를 넣어주는 경우에는 이미지를 잘 불러오는 것을 확인하였습니다.

그러나, 기존에 import 방식을 사용한 리액트 파일들을 위와 방식으로 전부 수정하는 것은.. 조금 무리였기에 import 방식에 대해 구글링을 해보았습니다.

구글링 결과, import 방식도 당연히 사용이 가능하다..! 라는 결론이 나왔고,, 제 코드는 더욱 미궁에 빠졌습니다…💦

 

 

😆 Solution

src 속성이 비어있다는 에러를 발견하였습니다.

추가로 network 탭 확인 결과, 아예 해당 이미지 리퀘스트를 보내지 않는 것을 확인하였습니다.

따라서 import한 searchImg를 console.log로 찍어보니, string이 아닌 리액트 컴포넌트화되어있는 것을 확인할 수 있었습니다.

결론은 Image 컴포넌트의 src 속성은 string이여야 하는데, 저의 searchImg는 리액트 컴포넌트화된 값이었기 때문에 경로를 찾지 못하는 문제가 발생했던 것입니다.

 

 

 

❓ Why

💡 왜 저의 searchImg가 리액트 컴포넌트화되어있던 것일까요?

• 처음에 리액트 프로젝트 파일을 가져왔더니, 모든 svg 파일들을 import하는 부분에 에러가 발생하였습니다.
• 현재 제 프로젝트에는, 커스텀.d.ts 파일을 이용해 svg 관련 타입 문제는 이미 해결한 상황이었습니다.
• 따라서, svg와 next.js 사이의 문제라고 판단 → 구글링 진행
• 그 결과, @svgr/webpack 을 다운받고, config 파일에 적용시켰습니다.

제가 다운받은 webpack이 svg 파일을 컴포넌트화시켜서, 컴포넌트처럼 사용할 수 있도록 해주는 역할이었기 때문에 위와 같은 문제가 발생했던 것입니다.

 

따라서 해당 웹팩을 사용하는 경우, <SearchImg /> 와 같은 방법으로 이미지를 사용할 수 있습니다.

 

그러나 저 방법을 사용했을 때 styled-components와의 충돌이 있었고, 저는 다른 방법을 찾아야 했습니다.
→ 어째서인지 상속이 되지 않았다…

 

따라서 img 태그에서,, 또 Image 태그로.. 또 img로.. 계속 바꾸다 보니 웹팩의 존재를 잊어버렸,,!! 습니다..

결론은 웹팩 적용을 지웠더니 import 방식으로 이미지를 사용할 수 있게 되었습니다~!

🧐 그렇다면 대체 처음 svg 오류는 무엇때문이었던걸까요 …

---

Next에 익숙해진 지금의 생각은 svg는 svgr 웹팩 사용해서 다루는 게 훨씬 나은 것 같다!

stroke나 width같은 속성 직접 줘서 바꿀 수 있는 장점이 큰 것 같아서..👍