9장: 에셋과 정적 파일 다루기

Next.js에서 정적 파일과 에셋 다루기

Next.js 15에서는 이미지, 아이콘, 폰트처럼 외부에서 접근 가능한 리소스(정적 파일)를 매우 쉽게 관리합니다. 특별한 설정 없이도 앱에 필요한 다양한 파일을 불러올 수 있기 때문에, 프로젝트의 편의성과 효율성을 자연스럽게 높일 수 있습니다.

public 폴더의 역할과 사용법

Next.js 프로젝트의 루트 디렉터리에는 기본적으로 public/ 폴더가 있습니다. 이곳은 웹사이트에서 직접 바로 접근 가능한 모든 정적 자산을 담는 공간입니다. 예를 들어 로고 이미지를 넣고 싶다면 public/images/logo.png처럼 파일을 저장하세요. 실제로 브라우저에서 불러올 때는 /images/logo.png 경로만 사용하면 됩니다. 따로 import하거나 동적으로 처리할 필요 없이, HTML 태그의 src나 CSS의 url에 바로 넣어 호출할 수 있습니다.

정적 파일의 활용 예시

누구나 자주 사용하는 이미지를 페이지에 삽입하고자 할 때, 아래와 같이 간단히 쓸 수 있습니다.

<img src="/images/banner.png" alt="배너 이미지" />

폰트, 파비콘, 로봇 텍스트 등도 같은 방법으로 활용합니다. 예를 들어, 사이트의 파비콘은 public/favicon.ico에 배치하면 자동으로 적용됩니다.

정적 자산 관리의 주의점

public 폴더 내 파일들은 Next.js 빌드나 번들 과정의 영향을 받지 않고, 서버가 있는 그대로 전달합니다. 파일 내에서 환경변수나 import 문법을 사용할 수 없고, 코드가 아닌 데이터, 미디어 리소스에만 적합합니다. 또한, 빌드 후에는 이 폴더에 새로 추가한 파일이 바로 반영되지 않을 수 있으니, 항상 개발 서버를 재시작하거나 빌드 과정을 다시 거칠 필요가 있습니다.

이미지 최적화와 동적 처리를 원할 때

정적 파일은 매우 빠르게 제공되지만, 이미지 크기 최적화나 포맷 변환 등 추가적인 처리가 필요할 땐 Next.js의 이미지 컴포넌트(next/image)를 사용하는 것이 좋습니다. 그 경우 이미지는 public 폴더에 두거나, 외부 URL을 적용하고, next.config.js에서 도메인을 지정해 활용하면 됩니다.

정적 파일로 가능한 것과 불가능한 것

간단하게 말해서 public 폴더에 있는 파일은 누구나 접근할 수 있고, 복잡한 처리 없이 빠르게 전달됩니다. 자바스크립트 소스 코드처럼 번들링 과정이 필요한 리소스나, 데이터 보호(비공개)가 필요한 파일은 public 폴더에 위치시키지 않아야 합니다. 반대로 사용자에게 공개해야 하는 모든 이미지, 글꼴, robots.txt 파일 등은 이곳에 저장하는 것이 올바른 방법입니다.

마치며

Next.js 15 기준으로, public 폴더를 이용한 정적 파일 관리는 웹 개발을 더욱 직관적이고 쉽게 만듭니다. 자주 쓰이는 이미지는 물론, HTML, PDF, 폰트, 각종 데이터를 빠르게 배포하고 싶을 때 이 기능을 적극적으로 활용해 보세요. 다음 챕터에서는 이러한 리소스 활용과 더불어, 정적 사이트 생성과 빌드 활용법도 자세히 다루겠습니다.