brunch

(Next.js) public과 assets의 차이

by brunchdev


Next.js에서 `public` 폴더와 `assets` 폴더를 사용하는 것에는 몇 가지 중요한 차이점이 있습니다:


1. `public` 폴더

- Next.js에서 기본적으로 제공하는 폴더입니다.

- 정적 파일(이미지, 폰트, 아이콘 등)을 저장하는 데 사용됩니다.

- 이 폴더의 파일들은 루트 URL('/')에서 직접 접근할 수 있습니다.

- 빌드 프로세스에서 최적화되지 않습니다.

- 파일 이름이 변경되지 않고 그대로 유지됩니다.


2. `assets` 폴더

- Next.js에서 기본적으로 제공하지 않는 사용자 정의 폴더입니다.

- 주로 컴포넌트나 페이지에서 import하여 사용할 자원들을 저장합니다.

- 이미지, CSS 파일, SCSS 파일 등을 포함할 수 있습니다.

- 빌드 프로세스에서 최적화되고 처리될 수 있습니다.

- 웹팩과 같은 번들러에 의해 처리되어 파일 이름이 해시값으로 변경될 수 있습니다.


주요 차이점은 접근 방식과 최적화에 있습니다. `public` 폴더의 파일은 직접 URL로 접근되지만, `assets` 폴더의 파일은 일반적으로 코드 내에서 import되어 사용됩니다.


폰트 파일은 따로 최적화 되진 않습니다.


keyword
월, 화, 수, 목, 금, 토, 일 연재