Next.js에서 정적 자산은 어떻게 제공하나요?

Question

Accepted Answer

Next.js는 정적 파일(이미지, 폰트, 아이콘, PDF, `robots.txt`)을 프로젝트 루트의 특수 폴더인 **`public/`**에서 제공합니다. ## public 폴더는 URL 루트에 매핑됨 ```text public/ logo.png → /logo.png 로 제공됨 favicon.ico → /favicon.ico 로 제공됨 docs/guide.pdf → /docs/guide.pdf 로 제공됨 robots.txt → /robots.txt 로 제공됨 ``` `public/logo.png` 파일은 `/logo.png` URL에서 사용할 수 있습니다. `public/` 부분은 떨어져 나갑니다. 루트로부터의 절대 경로로 참조하세요: ```tsx import Image from "next/image"; export default function Header() { return ( <>

Download guide ); } ``` ## public/ vs 자산 import ```tsx // 옵션 A: public/에서 — URL 문자열로 참조

// 옵션 B: import — 번들되고 캐싱을 위해 해시 처리, 치수 추론됨 import logo from "./logo.png";

// width/height가 import에서 자동으로 들어옴 ``` **import된** 이미지는 콘텐츠 해시 파일명을 얻고(장기 캐싱에 좋음) Next가 치수를 추론할 수 있습니다. 안정적인 URL로 참조되는 파일(favicon, robots.txt, og-image, 다운로드용)에는 `public/`을, 컴포넌트에서 직접 사용하는 이미지에는 **import**를 사용하세요. ## 주의 사항 - **빌드 시점**에 존재하는 파일만 제공됩니다. `public/`은 런타임 업로드 대상이 아닙니다. - 비밀 정보를 두지 마세요. `public/`의 모든 것은 URL로 누구나 접근할 수 있습니다. ## 왜 중요한가 `public/` 폴더는 Next.js에서 정적 파일(favicon, robots.txt, OG 이미지, 다운로드)을 제공하는 단순하고 컨벤션 기반의 방법입니다. 그 내용이 URL 루트에 매핑된다는 점과, 자산을 import하는 편(해시됨, 캐싱 가능, 자동 크기 산정)이 나은지 `public/`에서 참조하는 편이 나은지를 아는 것이 일상적인 정적 자산 요구를 모두 다룹니다.