애셋과 웹 코드 분리를 위한 코드 작성 가이드

애셋 저장 위치

애셋은 src/assets/images/에 넣으세요. /public에 넣는 애셋은 favicon.ico 같은 브라우저가 필수적으로 요구하는 것만 넣으세요.

예제 코드

import Image from "next/image";
import squirtle from "@/assets/images/squirtle.png";

export default function Component() {
  return <Image src={squirtle} alt="Squirtle" />;
}

마법

• 캐시 무효화: 애셋에 해시가 최종적으로 반영되어 브라우저의 캐시 문제를 원천 차단할 수 있습니다.
• DX 향상: TypeScript 자동완성과 import 경로 검증이 가능합니다.
• DX 향상: CDN은 인프라 파이프라인으로 분리하여 코드에만 집중할 수 있습니다.

라이브 예제

Squirtle (PNG)

해시된 URL