[Next.js] 정적(static) 이미지 및 파일 사용하기

1. 정적 이미지 파일 사용하기

---

프로젝트 안에서 고정된 파일명을 가지고 있는 파일을 사용하려면 우선 프로젝트 경로에서 ./public 폴더에 파일을 넣어줍니다.

 

import Image from 'next/image'

function Avatar() {
  return <Image src="/me.png" alt="me" width="100" height="100" />
}

export default Avatar

 

이미지를 예로들어 ./public/me.png 경로에 파일이 존재하면 아래처럼 src 속성에 알맞게 파일명을 넣어주면 해당 경로의 파일에 접근할 수 있습니다. 공식 문서에 여러 주의사항있어 참고하면 좋겠습니다.

2. 주의사항

---

• Next/image를 사용하려면 10 버전 이상만 사용 가능
• public 폴더 명은 동적 파일 사용을 위한 유일한 폴더이므로 이름을 변경하면 안된다.
• pages 폴더에 있는 파일 이름과 public 폴더에 있는 파일 이름이 중복되면 에러가 발생한다.
• 빌드시 public 폴더 안에 있는 파일만 사용 가능하고 런타임시 추가된 파일들은 사용할 수 없다.

공식문서

---

Basic Features: Static File Serving | Next.js