next.js 에서 static asset 사용하기 (public vs src)

next.js 에서 static asset을 사용하는 방식에는 크게 두가지 방법이 있습니다.

Static Asset 접근 방식

public 폴더에 저장

• public 폴더에 있는 파일은 정적 파일로 간주되며, Next.js 서버를 통해 직접 URL로 접근할 수 있습니다.

• 브라우저에서 접근하는 방식:

  http://localhost:3000/파일경로

  예: public/images/logo.png → http://localhost:3000/images/logo.png

src 폴더에 저장

• src 폴더는 코드 및 컴포넌트를 저장하는 공간으로, 파일이 직접 브라우저에서 접근 가능하지 않습니다.

• 해당 자산을 사용하려면 JavaScript/TypeScript 코드에서 해당 파일을 import해야 합니다.

  import logo from '../images/logo.png';

2. 파일 관리와 빌드 프로세스

public 폴더

• 파일은 빌드 프로세스에서 그대로 유지됩니다.

• Next.js는 public 폴더에 있는 파일을 변환하거나 번들링하지 않습니다.

• 브라우저가 요청할 때 Next.js 서버에서 정적으로 제공됩니다.

• 이 방식은 폰트, 동영상, PDF 등 이미 번들링이 필요 없는 자산에 적합합니다.

src 폴더

• 파일은 Next.js의 Webpack 빌드 프로세스에 포함됩니다.

• 번들링 과정에서 최적화가 이루어지며, 코드 분할(Chunking)이나 Tree Shaking 같은 최적화가 적용됩니다.

• 각 파일은 import된 경우에만 포함되므로, 사용하지 않는 파일은 번들에 포함되지 않습니다.

• 이 방식은 동적으로 사용되거나, 코드와 강하게 연관된 이미지나 자산에 적합합니다.

3. 파일 크기 및 URL 변경

public 폴더

• 파일 이름과 경로가 그대로 유지됩니다.

• 빌드 후에도 파일 이름이 변경되지 않으므로 브라우저가 캐싱할 가능성이 높습니다.

  public/images/logo.png → /images/logo.png

src 폴더

• Webpack은 파일을 처리하면서 고유한 해시를 포함한 이름으로 변경합니다.

  src/images/logo.png → /_next/static/media/logo.abc123.png

• 파일 이름이 고유한 해시로 변경되므로 캐싱 관련 문제가 줄어듭니다.

4. 사용 사례 비교

public 폴더를 사용하는 경우

• 정적 파일을 그대로 제공해야 할 때:

  • 브라우저에서 직접 URL로 접근 가능해야 하는 경우 (예: 로고, 폰트, PDF 파일, 동영상 등).

  • 예:

    <img src="/images/logo.png" alt="Logo" />

• 파일이 빌드 프로세스에 포함되지 않아야 하는 경우:

  • 매우 큰 파일(예: 대용량 동영상)을 저장하고 싶을 때.

  • 외부 CDN에서 파일을 관리하는 경우와 유사한 방식으로 동작.

src 폴더를 사용하는 경우

• 코드와 밀접하게 연결된 자산:

  • 컴포넌트에서 동적으로 로드되거나 특정 로직에 따라 조건부로 사용되는 이미지.

  • 예:

    import logo from '../images/logo.png'; export default function Header() { return <img src={logo} alt="Logo" />; }

• 파일이 Webpack 최적화의 이점을 받아야 하는 경우:

  • Tree Shaking 및 코드 스플리팅이 필요할 때.

  • 파일 이름에 고유한 해시가 필요할 때(캐싱 무효화를 위해).

5. SEO 및 성능 차이

• public 폴더의 파일은 브라우저가 직접 접근할 수 있으므로 SEO 및 성능 최적화를 위해 중요합니다. 특히, 정적 이미지나 favicon, robots.txt, sitemap 등을 제공할 때 유리합니다.

• src 폴더의 자산은 코드 내부에서만 사용 가능하므로 브라우저가 이를 직접 처리할 수 없으며, CDN에 적합하지 않습니다.

6. 요약

결론

• public: 정적 파일처럼 그대로 제공해야 하는 자산에 사용.

• src: 코드와 연관된 자산(이미지, JSON, 모듈 등)을 관리하고 Webpack의 최적화 기능을 활용하고 싶을 때 사용.