next build
는 제품을 위해 최적화된 버전의 앱을 생성한다. 표준 출력은 다음을 포함한다:
getStaticProps
나 자동 정적 최적화를 사용하는 페이지를 위한 HTML 파일.이런 출력물들은 .next
폴더 안에 생성되어 있다:
.next/static/chunks/pages
- 이 폴더 안의 각 자바스크립트 파일들은 같은 이름을 가진 라우터와 연관이 있다.예를 들면, .next/static/chnks/pages/about.js
는 앱에서 /about
라우트를 보고 있을 때 불러와진다..next/static/media
- next/image
로부터 정적으로 import 된 이미지들이 해시 및 복사되어 있다..next/static/css
- 앱 내 모든 페이지를 위한 글로벌 CSS 파일.next/server/pages
- 서버로부터 사전렌더링된 HTML 과 자바스크립트 진입점. .nft.json
파일 출력파일 추적이 활성화 될 때 생성되고, 주어진 페이지에 의존하는 모든 파일 경로를 포함한다..next/server/chunks
- 앱 전체 여러 곳에서 사용되는 공유된 자바스크립트 덩어리들..next/cache
- Next.js 서버로부터 빌드된 캐시, 캐시된 이미지, 응답, 페이지들을 위한 결과물. 캐시를 사용해 빌드 시간 단축 및 이미지 로딩 성능 향상에 도움을 줌..next
안에 있는 모든 자바스크립트 코드들은 컴파일 되었고, 브라우저 번들은 모든 최신 브라우저들을 지원하고 최고 성능에 도달하기 위해 축소 되었다.
Vercel 은 별도 구성 없이 Next.js 앱을 배포하는 가장 빠른 방법이다.
Vercel 로 배포하면 플랫폼이 자동으로 Next.js 를 감지하고 next build
를 실행한다. 그리고 다음을 포함해 빌드 결과물을 최적화한다.
추가로 Vercel은 이런 기능도 제공:
next/image
이미지 최적화 지원git push
를 통해 즉시 글로벌 배포Node.js 나 Docker 를 이용해 Next.js 의 모든 기능을 지원하며 셀프 호스팅할 수 있다. 몇 가지 제한이 있는 정적 HTML export 도 가능하다.
Next.js 는 Node.js 를 지원하는 모든 호스팅 제공자에 배포 가능하다. 예를 들면 AWS EC2나 DigitalOcean Droplet 이 있다.
먼저, package.json
내부에 "build" 와 "start" 스크립트가 있음을 확실히 한다.
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
그리고, next build
를 실행해 앱을 빌드한다. 마지막으로 next start
를 실행해 Node.js 서버를 시작한다. 이 서버는 Next.js 의 모든 기능을 지원한다.
next/image
를 사용한다면, 이미지 최적화의 더 나은 성능을 위해 프로젝트 디렉토리 안에서npm install sharp
를 실행해sharp
를 추가하는 것을 고려하자. 리눅스 플랫폼에서sharp
는 추가적 메모리 사용을 방지하기 위해 추가적인 구성이 요구될 수 있음
Next.js 는 Docker 컨테이너를 지원하는 모든 호스팅 제공자에 배포 가능하다. 쿠버네티스나 HashiCorp Nomad 같은 컨테이너 오케스트레이터에 배포할 때나 모든 클라우드 제공자 내 단일 노드 내에서 가동하는 경우 이런 접근방법을 사용할 수 있다.
docker run -p 3000:300 nextjs-docker
여러 환경에서 다른 환경변수를 사용해야할 필요가 있다면, with-docker-multi-env
예제를 참고.
아래 서비스들은 Next.js v12
이상을 지원한다. 각 서비스마다 예제나 Next.js 배포 가이드를 찾을 수 있다.
노트: 위의 예처럼 Dockerfile 을 사용할 수 있는 관리형 플랫폼도 있다.
아래 서비스들은 next export
를 사용한 Next.js 배포를 지원한다.
GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines 등 CI/CD 파이프라인을 통해 정적 호스팅 제공자에게 next export
출력물을 직접 배포할 수도 있다.
노트: 모든 서버리스 제공자가
next start
로부터 Next.js 빌드 API 를 구현하는 건 아니다. 제공자가 어떤 기능을 지원하는지 확인해야 한다.
Next.js 앱을 배포할 때, 최신 버전을 리로드 없이 보고 싶다.
Next.js 는 라우팅 시 백그라운드에서 앱의 최신 버전을 자동으로 불러올 것이다. 클라이언트 사이드 탐색에선 next/link
가 임시로 <a> 태그의 기능을 한다.
노트: 새로운 페이지 (이전 버전)가 next/link
에 의해 이미 Prefetch 되었다면 Next.js 는 이전 버전을 사용할 것이다.
Preefetch 되지 않은 (그리고 CDN 레벨에서 캐시되지 않은) 페이지로 이동하면 최신 버전이 로드 된다.
가끔 SIGTERM
이나 SIGINT
같은 프로세스 신호에서 클린업 코드를 실행하고 싶을 수 있다.
환경변수 NEXT_MANUAL_SIG_HANDLE
를 true
로 설정하고 _document.js
파일 내에 이 신호에 대한 핸들러를 등록하면 된다.
// pages/_document.js
if (process.env.NEXT_MANUAL_SIG_HANDLE) {
// this should be added in your custom _document
process.on('SIGTERM', () => {
console.log('Received SIGTERM: ', 'cleaning up')
process.exit(0)
})
process.on('SIGINT', () => {
console.log('Received SIGINT: ', 'cleaning up')
process.exit(0)
})
}