next js 동작 원리

1. 빌드과정

• pages폴더에 라우팅 url과 동일한 이름의 컴포넌트를 생성해야 함
• pages 컴포넌트가 next 라우팅과 동일하게 맵핑되기 때문이다.
• url이 /first면, pages/first.jsx 파일이 있어야 함

2. 터미널 상에서 "next"라는 npm 커맨드의 의미

• next가 빌드를 진행하고, 서버를 실행
• 빌드 시, 자동 코드 트랜스 파일링, 번들링
• hot code reloading
• ./static/폴더 내, 리소스의 /static path에 접근????? 먼솔

3. 빌드가 완료되면 .next 폴더가 생성된다.

# .map 파일 제외
.next/                    # 빌드 root 디렉토리
  bundles/
    pages/
      _error.js
      (index.js)          # production 환경에서 생성
      (second.js)         # production 환경에서 생성
  dist/                   # 실제 렌더링 되는 파일들이 담긴 폴더
    bundles/
      pages/
        _document.js
        _error.js
        (index.js)          # production 환경에서 생성
        (second.js)         # production 환경에서 생성
  main.js                 # 번들된 javascript 파일
  manifest.js

아직 서버에서 실행할 page 자바스크립트가 만들어지지 않았습니다. 이 경우에 모든 렌더링 관련 코드는 main.js 에 포함됩니다. 이는 dev 환경일때만 해당되는 것으로 라우팅 될 때마다 필요한 페이지를 생성합니다. production 환경에서는 page 코드를 미리 준비합니다. 더 빠른 초기 렌더링이 가능하기 때문입니다. dev 환경에서는 빠른 빌드가 주 목적이기 때문에 미리 page 를 생성하지 않습니다. 반면에 production 환경에서는 초기 렌더링을 빠르게 하는것이 주 목적이기 때문에 page 코드를 미리 생성합니다.

브라우저를 열고 localhost:3000/를 입력합니다. 다음과 같은 화면이 출력됩니다.

index

폴더 구조를 다시 보면, .next 폴더 안에 bundles/page/index.js 와 dist/bundles/page/index.js 가 만들어진것을 확인할 수 있습니다. 그리고 url 을 입력할때마다 .next 폴더에 0.[hash].hot-update.js와 같은 파일이 생성됩니다. 이는 page 코드를 만들때(서버든 클라이언트든) 동적으로 생성되는 js 파일입니다. dev 에만 해당되는 내용으로 production 환경에서는 생성되지 않습니다.