Skip to main content

앱 라우터 빌드

빌드(build)란 넥스트로 만든 웹 애플리케이션을 사용자에게 제공하기 위해 꼭 거쳐야 하는 과정입니다. npm run build 명령어로 빌드를 할 때 알아야 할 내용들을 살펴보겠습니다.

빌드 명령어​

빌드 명령어는 create-next-app로 프로젝트를 만들었다면 아래와 같이 package.json 파일에서 확인할 수 있습니다.

{
  "name": "app-router",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  // ...
}

넥스트 애플리케이션을 구동하는데 필요한 라이브러리들이 설치되어 있다면 npm run build로 빌드 명령어를 실행할 수 있습니다.

tip

애플리케이션 구동에 필요한 라이브러리들은 dependencies에 정의되어 있습니다. 자세한 내용은 다음 가이드나 영상을 참고하세요 :)

로컬 서버와 빌드된 애플리케이션의 동작이 다르다면?​

로컬에서는 데이터 조회, 수정 등 갱신이 잘 되다가 갑자기 빌드한 버전에서는 데이터 갱신이 잘 안되는 경우가 있습니다. 그 이유는 바로 넥스트에서 페이지를 미리 그려뒀기 때문입니다. 여기서 미리 그린다라는 말은 프리렌더링(Pre-rendering)을 의미합니다.

아래 그림은 간단한 쇼핑몰 애플리케이션을 빌드한 결과입니다.

next-build-result

/cart, /login, /products/[id] 등의 페이지가 각각 어떻게 빌드되었는지 o, f 구분자를 통해서 알 수 있습니다. 그림 맨 아래에 나와있는 것처럼 o는 미리 그려진 스태틱 페이지를 의미하고, f는 요청이 들어왔을 때 서버에서 즉석으로 그려낸 페이지를 의미합니다.

여기서 /cart와 /login 페이지는 프리렌더링 되었고, 나머지 /products/* 페이지는 서버에 요청이 들어왔을 때 페이지를 그리게 됩니다.

tip

프리렌더링은 정적 렌더링이라고도 표현합니다. 자세한 가이드는 정적 렌더링를 참고하세요.

로컬 서버의 동작과 동일하게 바꾸고 싶다면?​

앞에서 살펴본 /cart 페이지는 장바구니의 목록을 실시간으로 받아와야 하기 떄문에 미리 빌드된 결과물을 사용하면 안됩니다. 이렇게 데이터 목록을 브라우저에서 사용자가 요청한 시점에 불러오려면 다음과 같은 API를 사용해야 합니다.

대부분의 서비스 페이지에서는 헤더나 쿠키를 다룰 일이 많기 때문에 이 2개를 쓰면 로컬 서버와 빌드된 결과물의 동작이 같아질 겁니다. 만약 이 API들을 쓸 일이 없다면 connection() API를 사용해서 동적 렌더링으로 변경할 수 있습니다.