Next.js는 루트 디렉토리의 public이라는 폴더에서 이미지와 같은 정적 파일을 제공할 수 있다. 그러면 기본 URL(/)에서 시작하는 코드에서 public 내부의 파일을 참조할 수 있다. 예를 들어 public 안에 me.png를 추가하면 다음 코드가 이미지에 액세스 한다.
// Avatar.js
import image from 'next/image'
export function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="63" />
}
robots.txt, favicon.ico 등과 같은 정적 메타데이터 파일의 경우 앱 폴더 내의 특수 메타데이터 파일을 사용해야 한다. 디렉토리의 이름은 public이어야 한다. 이름이 변경될 수 없으며 정적 자산을 제공하는 데 사용되는 유일한 디렉토리이다. 빌드 시 공개 디렉토리에 있는 자산만 Next.js에서 제공된다. 런타임에 추가된 파일은 사용할 수 없다. 영구 파일 저장을 위해 AWS S3와 같은 타사 서비스를 사용하는 것이 좋다.
'Next.js' 카테고리의 다른 글
Next.js 9-8 OpenTelemetry (0) | 2023.06.16 |
---|---|
Next.js 9-7 Lazy Loading (0) | 2023.06.15 |
Next.js 9-5 Metadata (1) | 2023.06.13 |
Next.js 9-4 Script Optimization (0) | 2023.06.09 |
Next.js 9-3 Font Optimization (0) | 2023.06.08 |