Next.js 에서 이미지 관리 : public vs src/assets

최근 Next.js로 프로젝트를 진행하면서 이미지를 저장하는 두 가지 방식이 있는 걸 알게 되었다.

폴더구조

1. public 폴더에 저장하기

2. src/assets 에 저장하기

둘 중 하나만 쓰면 되는 거 아니야?

라는 생각이 들었지만, 상황에 따라 둘 다 쓰는 게 유리할 수 있다는 것을 알게 되어 공유하고자 한다.

 

일단 특징을 표로 정리해 보았다.

특징	public	src/assets
사용 방식	URL 접근 가능 (import 도 가능)	Import 로 불러옴
캐싱 문제	업데이트 된 이미지가 이전 이미지와 파일명이 같다면 옛날 파일을 보여줄 수도 있음	해시된 파일명으로 최신 파일만 표시
번들링	번들링 되지 않음	번들링과 최적화 자동으로 진행
성능	번들 크기에 영향을 안줌	자주 사용하면 번들 크기가 커질 수 있음
최적화	Next/image 와 함께 사용시 최적화 가능	빌드 과정에서 자동 최적화
적합한 경우	로고, 아이콘처럼 변경이 드문 정적 자산	자주 바뀌거나 컴포넌트와 관련된 이미지

위의 표를 보면 이해가 안가는 문장이나 단어가 있을 수도 있다. (이 말을 하는 이유는 ㅋㅋ 내가 그랬다. 근데 만약 다 이해했다면 당신은 대단하다!! 👍)

일단 내가 몰랐던 부분을 정리해보면

해시(Hash) 값을 파일명에 붙이는 이유 : 고유한 값을 파일에 붙여줘서 업데이트된 내용이 제대로 반영되게 해 줌

자주 사용하면 번들 크기가 커질 수 있음의 의미 : 최적화되지 않은 파일을 추가하면 번들크기에 영향을 줄 수 있다. && 번들에 포함된 자산 크기와 수에 따라 초기 로딩 속도에 영향을 미칠 수 있다.

캐싱 문제란?

브라우저는 이전에 불러왔던 파일을 저장해서 빠르게 다시 보여준다. 문제는 파일 내용을 바꿔도 파일명이 같으면 브라우저가 옛날 파일을 계속 보여준다는 것.

예) public/images/logo.png를 새로운 이미지로 교체했는데, 브라우저는 캐시 돼서 여전히 예전 이미지를 보여주는 경우

위의 문제를 해결하는 방법 : src/assets

- src/assets에 이미지를 저장하면 Next.js가 파일명을 해싱 (예: logo.abc123.png)한다. 파일이 바뀔 때마다 새로운 이름이 만들어져 브라우저가 무조건 최신 파일을 가지고 옴

예) 

- 원본파일 : src/assets/images/logo.png

- 빌드 수: _next/static/media/logo.abc123.png

각 방식의 활용법

Public 폴더

1. 거의 바뀌지 않는 이미지 (예: 로고, favicon)

2. JSON 데이터나 API 응답에서 이미지 URL을 참조해야 할 때.

//예
[
  {
    "id": 1,
    "title": "멋진 카드",
    "img": "/images/cards/card1.png"
  }
]

3. 번들 크기를 최소화하고 싶을 때

 

src/assets 폴더

1. 특정 컴포넌트와 밀접하게 연결된 이미지 (모듈화)

2. 자주 바뀌는 비주얼

3. 타입 안전한 Import로 경로 오류를 방지하고 싶을 때

** 부록 : Public 폴더의 캐싱 문제 해결법

1. 파일명 변경 : 새로운 업데이트마다 고유한 이름 붙이기 (예:logo_v2.png)

근데 이게 귀찮으니까 자주 바뀐다면 그냥 src/assets에 저장하는 걸 추천함.

 

결론 : 적절히 섞어 쓰자!

내가 내린 결론은 일단 이미지들은 assets에 저장하고 url으로 접근해야 하는 경우에는 public에 옮겨서 쓰는 게 낫겠다고 판별함.