Next.js의 빌드를 알아보자

Next.js는 React 기반 웹 애플리케이션 개발을 위한 강력한 프레임워크이다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 이미지 최적화, 라우팅 등 다양한 기능을 제공하여 개발 생산성과 사용자 경험을 향상시킨다.

이번 포스팅에서는 Next.js 프로젝트를 빌드하는 방법과 빌드 과정 그리고 빌드 결과물에 대해 알아보겠습니다.

Next.js란?

Next.js는 React를 기반으로 하는 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 코드 스플리팅, 이미지 최적화, 라우팅 등 다양한 기능을 제공합니다.

• 서버 사이드 렌더링(SSR): 페이지 로딩 속도를 개선하고 SEO(검색 엔진 최적화)를 향상시킵니다.
• 정적 사이트 생성(SSG): 빌드 시점에 HTML 파일을 생성하여 빠른 페이지 로딩과 안정적인 성능을 제공합니다.
• 클라이언트 사이드 렌더링(CSR): 동적인 데이터 처리와 복잡한 상호작용을 구현할 수 있습니다.
• 코드 스플리팅: 필요한 코드만 로드하여 초기 로딩 속도를 개선합니다.
• 이미지 최적화: 이미지 크기를 자동으로 조정하고 최적화하여 페이지 로딩 속도를 향상시킵니다.
• 라우팅: 파일 시스템 기반 라우팅을 통해 직관적인 URL 구조를 제공합니다.

빌드 방법 (명령어)

Next.js 프로젝트를 빌드하려면 아래 명령어를 실행한다.

next build

 

이 명령어는 프로덕션 환경에 배포할 수 있도록 최적화된 정적 파일들을 생성한다.

빌드 과정

next build 명령어를 실행하면 다음과 같은 과정을 거쳐 빌드가 진행된다.

1. 서버 컴포넌트 빌드: app 디렉토리 내의 서버 컴포넌트들을 빌드하여 서버 사이드 렌더링(SSR) 및 API 라우트 처리를 위한 파일들을 생성한다.
2. 클라이언트 컴포넌트 빌드: app 및 pages 디렉토리 내의 클라이언트 컴포넌트들을 빌드하여 브라우저에서 실행될 JavaScript 및 CSS 파일들을 생성한다.
3. 정적 파일 생성: 이미지, 폰트 등의 정적 파일들을 최적화하여 .next/static 폴더에 저장한다.
4. 라우팅 설정 생성: app 및 pages 디렉토리 구조를 분석하여 애플리케이션의 라우팅 설정을 .next/routes-manifest.json 파일에 저장한다.
5. 코드 분할: 애플리케이션의 코드를 여러 개의 작은 청크로 분할하여 필요한 부분만 로딩하도록 최적화한다.

빌드 결과물

빌드가 완료되면 프로젝트 루트 디렉토리에 .next 폴더가 생성된다. 이 폴더에는 빌드 결과물인 다양한 파일들이 저장된다.

주요 파일 및 폴더는 아래와 같다.

• .next/static/chunks: 클라이언트 컴포넌트들의 JavaScript 코드 청크 파일들이 저장됩니다.
• .next/static/css: 클라이언트 컴포넌트들의 CSS 스타일 파일들이 저장됩니다.
• .next/static/media: 이미지, 폰트 등의 최적화된 정적 파일들이 저장됩니다.
• .next/server/pages: 서버 컴포넌트들의 빌드 결과물들이 저장됩니다.
• .next/server/app: app 디렉토리의 서버 컴포넌트 빌드 결과물들이 저장됩니다.
• .next/cache: 빌드 캐시 파일들이 저장되어 다음 빌드 시 속도를 향상시킵니다.
• .next/routes-manifest.json: 애플리케이션의 라우팅 설정 정보가 저장됩니다.
• .next/build-manifest.json: 빌드된 파일들의 정보가 저장됩니다.

참고자료

Docs | Next.js