정적에셋.md

public 폴더에 있는 정적 에셋들

• Next.js는 이미지와 같은 정적 파일을 public이라는 폴더에서 제공이 가능함
• public 내부의 파일은 /me.png 처럼 참조가 가능함
• 아래 예시는 public/avatars/me.png 파일을 /avatars/me.png 로 참조하는 방식임

import Image from "next/image";

export function Avatar({ id, alt }: { id: string; alt: string }) {
  return <Image src={`/avatars/${id}.png`} alt={alt} width="64" height="64" />;
}

export function AvatarOfMe() {
  return <Avatar id="me" alt="A portrait of me" />;
}

캐싱

• 기본적으로 public 폴더 내부의 데이터는 변경이 가능하므로 안전하게 캐싱이 불가능함
• 아래는 적용되는 기본 캐싱 헤더임

Cache-Control: public, max-age=0

Robots, Favicons 등

• 위 와 같은 정적 메타데이터는 app 폴더 내부에서 사용해야됨