처음 만난 Next.js 문서
12.5
Static Assets
Next.js는 루트 디렉토리에 public 폴더를 만들어 이미지 같은 정적 파일을 제공할 수 있습니다. public 폴더 내부의 파일은 기본 URL (/)에서 시작하는 형태로 코드에서 참조할 수 있습니다. 예를 들어, public/avatars/me.png 파일의 경로는 /avatars/me.png가 됩니다.
아래 코드는 정적 파일을 사용한 예시 코드입니다. Next.js에서는 이렇게 public 폴더를 통해 정적 파일들을 제공할 수 있다고 이해하면 됩니다.
import Image from 'next/image';
export function Avatar({ id, alt }) {
return (
<Image
src={`/avatars/${id}.png`}
alt={alt}
width='64'
height='64'
/>
);
}
export function AvatarOfMe() {
return (
<Avatar
id='me'
alt='A portrait of me'
/>
);
}
마지막 업데이트: 2025년 10월 24일 02시 49분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page