[Next.js] Static File Serving

1. Static File Serving

next.js는 root directory의 public이라는 폴더에서 이미지와 같은 정적 파일을 제공할 수 있다.
따라서 public 내부의 파일을 기본 URL(/)에서 시작하는 코드로 참조할 수 있다.

예를 들어 public/me.png에 이미지를 추가하면 다음과 같이 이미지에 액세스할 수 있다.

import Image from 'next/image'

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

export default Avatar

2. public vs src

react의 일반적인 폴더구조는 다음과 같다.

my-app
├── node_modules
├── public
├── src
├── .gitignore
├── package.json
└── README.md

이때 public과 src에는 공통적으로 assets폴더가 존재하기 때문에 둘의 차이가 종종 헷갈릴 수 있다.
둘의 차이는 컴파일시에 필요한지 여부이다.

컴파일 단계에서 필요하지 않은 파일들은 public에,
컴포넌트 내부에서 사용하는 이미지 파일인 경우 이 src에 위치시켜야 한다.

3. src/assets in Next.js environment

위에서 정리한대로, 컴파일시 필요한 이미지는 src하위에 위치시켜야한다.
하지만 next에서 제공하는 Image 컴포넌트를 사용할 경우, 자동적으로 최적화가 이루어지기 때문에 public/assets에 위치시켜도 무방하다.
따라서 src/assets 구조로 분리할 필요가 없고, 모든 파일을 public에 넣으면 되는 것이다.

실제로 next의 예제 프로젝트 코드를 살펴보면 src폴더가 없고, 바로 components가 상단으로 올라와있는것을 볼 수가 있다.