next.js로 프로젝트를 시작하게 되면 루트폴더에는 다양한 폴더들이 생성이된다. 그 중에서 ".next"라는 녀석에 대해서 알아보기로 했다.
이 폴더는 Next.js프로젝트의 빌드와 실행 과정에서 생성되는 핵심 파일들을 담고 있는 디렉토리이다. 이 폴더는 캐시 역할도 수행하지만 그 외에도 여러 가지 중요한 기능을 포함하고 있다.
.next 폴더의 역할
.next 폴더는 Next.js가 프로젝트를 최적화하고 실행하는 데 필요한 중간 파일과 최종 산출물을 저장합니다. 주요 역할은 다음과 같습니다:
캐싱
- 컴파일된 파일 및 결과물 캐싱
- Next.js는 개발 서버를 실행하거나 프로젝트를 빌드할 때 소스 코드(JS/TS/SCSS 등)를 컴파일합니다. 이 과정에서 생성된 파일들을 .next 폴더에 저장하여 다음 빌드나 실행 시 중복 작업을 줄입니다.
- 예: JavaScript 코드가 Babel/TypeScript에 의해 변환된 결과를 저장
- HMR(Hot Module Replacement) 최적화
- 개발 모드에서 코드 변경 시 변경된 부분만 빠르게 반영하기 위해 .next 폴더에 캐싱된 파일을 사용
빌드 결과물 저장
- next build 명령어를 실행하면, 최종적으로 만들어진 정적 파일(HTML, CSS, JS 번들)이 .next 폴더에 저장됩니다.
- 배포 시 이 폴더의 파일들이 클라이언트와 서버에 사용됩니다.
서버 사이드 렌더링(SSR) 데이터
- 서버에서 렌더링된 HTML과 데이터를 포함한 프리렌더링 결과물이 .next에 저장됩니다. 이를 통해 서버와 클라이언트에서 효율적으로 콘텐츠를 제공할 수 있습니다.
.next 폴더의 구조
.next 폴더 내부에는 여러 하위 디렉토리와 파일이 있습니다. 주요 구성 요소를 살펴보겠습니다:
build
- 빌드와 관련된 메타데이터를 저장합니다
- Next.js가 빌드를 효율적으로 처리하기 위해 생성되는 내부 정보
cache
- Next.js가 빌드, 컴파일, 번들링 과정에서 중복 작업을 방지하기 위해 생성한 캐시 파일
- 개발 모드(next dev)나 빌드(next build)에서 공통적으로 사용됩니다
server
- SSR(서버 사이드 렌더링)과 관련된 파일이 여기에 저장됩니다
- 예: 페이지의 서버 렌더링 결과, API 라우트 핸들러, Edge Function 등의 데이터
static
- 정적 리소스(CSS, JS, 이미지 등)와 같은 클라이언트에서 사용되는 파일이 저장됩니다
- 번들링된 JavaScript 파일, 코드 스플리팅 결과물, 정적 최적화 결과물이 포함
routes
- Next.js가 빌드한 페이지들의 경로 정보가 저장됩니다
- 각 페이지에 대한 프리렌더링 정보와 관련된 파일이 포함
webpack
- Next.js 내부적으로 Webpack을 사용해 코드를 번들링한 결과물
- Webpack 설정과 관련된 캐싱 및 결과물이 저장됩니다
.next 폴더의 특징
- 자동 생성 및 관리
- Next.js를 실행(next dev, next build)하면 자동으로 생성됩니다
- 사용자가 직접 수정할 필요는 없으며, Next.js가 자동으로 파일을 관리합니다
- 삭제 가능:
- .next 폴더를 삭제해도 프로젝트에는 영향을 주지 않습니다. 다만, 삭제 후 다시 실행하면 컴파일 및 빌드 과정이 처음부터 재실행됩니다.
- 환경에 따라 다름
- 개발 모드(next dev): 개발 중 HMR, 캐싱, 소스 맵 등을 위해 사용
- 프로덕션 빌드(next build): 최적화된 정적 리소스와 서버 렌더링 파일을 포함
.next 폴더의 캐시와 관련된 주의점
- 빌드 문제가 발생할 경우
- 캐시된 데이터가 오래되거나 손상되면 빌드 또는 개발 서버에서 문제가 생길 수 있습니다. 이 경우 .next 폴더를 삭제한 후 다시 실행하면 문제가 해결되는 경우가 많습니다.
- 명령어: rm -rf .next && next build
- 캐시 정리:
- 배포 환경에서는 매 빌드 시 새로운 .next 폴더가 생성되므로, 이전 캐시 데이터가 남아있지 않도록 관리가 필요합니다.
정리
.next 폴더는 Next.js의 핵심 동작을 지원하는 빌드 파일과 캐시 데이터를 담고 있습니다.
- 캐시 역할: 컴파일 결과물과 빌드 결과를 저장하여 빌드 속도와 개발 서버의 효율성을 높임
- 빌드 산출물: 프로덕션 배포에 필요한 정적 파일과 SSR 결과물을 포함