[ Optimizing ] Static Assets

차차·2023년 5월 23일

목록 보기

29/34

Next.js는 루트 디렉토리에 public이라는 폴더 아래와 같이 이미지와 같은 정적 파일을 제공할 수 있다.

public 내부의 파일은 기본 URL (/)을 기준으로 코드에서 참조할 수 있다.

예를 들어, public 내부에 me.png를 추가하면 다음 코드로 이미지에 액세스할 수 있다.

import Image from 'next/image';
 
function Avatar() {
  return <Image src="/me.png" alt="me" width="64" height="64" />;
}
 
export default Avatar;

이 폴더는 robots.txt, favicon.ico, Google Site Verification 및 다른 정적 파일(.html 포함)에도 유용하다.

디렉토리 이름이 public인지 확인해야한다. 이름을 변경할 수 없으며, 정적 에셋을 제공하는 유일한 디렉토리다.
pages/ 디렉토리에 있는 파일과 같은 이름의 정적 파일이 있는지 확인하여 오류가 발생하지 않도록 해야 한다.
Next.js에서는 빌드 시점에 public 디렉토리에 있는 에셋만 제공된다. 런타임에서 추가된 파일은 사용할 수 없다. 지속적인 파일 저장을 위해 AWS S3와 같은 타사 서비스를 사용하는 것을 권장한다.

나는야 프린이

Next Docs