[NextJS] 빌드 디렉토리 구조

2023. 8. 1. 11:16NextJS

Next.js는 빌드 과정에서 여러가지 최적화와 사전 계산 작업을 수행하며,
이러한 작업의 결과물은 .next 디렉토리에 저장된다.

.next 디렉토리 안의 하위 디렉토리들의 역할은 아래와 같다.

  1. cache: 이 디렉토리는 Next.js의 빌드 캐시를 저장하는 곳! 이를 통해 변경되지 않은 소스 코드에 대한 재컴파일을 방지하고 빌드 속도를 향상시킨다. 이 캐시는 next build를 실행할 때마다 생성되고, next dev를 실행할 때는 사용되지 않는다.
  2. server: 이 디렉토리는 서버사이드 렌더링(SSR)이 필요한 페이지의 결과물을 포함. 이는 Next.js가 초기 페이지 로드를 처리하기 위해 Node.js 환경에서 실행하는 JavaScript 파일들이며. 여기에는 각 페이지의 HTML을 생성하는 로직이 포함되어 있다.
  3. static: 이 디렉토리는 모든 정적(즉, 브라우저에서 직접 로드될 수 있는) 파일들을 포함. 이에는 JavaScript 및 CSS 번들, 미리 렌더링된 HTML 페이지, public 디렉토리의 복사본 등이 포함된다.

이 외에도 chunks, build-manifest.json, react-loadable-manifest.json 등의 파일 및 디렉토리가 생성될 수 있으며,

이들은 Next.js의 코드 분할 및 페이지 로딩 최적화 메커니즘에 사용된다.

이렇게 생성된 .next 디렉토리는 일반적으로 소스 관리 시스템(Git 등)에 포함시키지 않으며, 배포 시에 생성하여 사용!

'NextJS' 카테고리의 다른 글

[NextJS] Naver Map Clustering  (0) 2023.11.30
[NextJS] Google map 사용  (1) 2023.11.09
[NextJS] dynamic  (0) 2023.08.03
[NextJS] getInitialProps 사용법  (0) 2022.08.30