본문 바로가기

Next.js

Next.js 9-6 Static Assets

  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