brunch

You can make anything
by writing

C.S.Lewis

by brunchdev Aug 19. 2024

(Next.js) public과 assets의 차이


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


1. `public` 폴더

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

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

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

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

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


2. `assets` 폴더

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

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

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

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

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


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


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


월, 화, 수, 목, 금, 토, 일 연재
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari