배포하기

축하합니다! 여러분은 이제 Next.js 애플리케이션을 배포할 준비가 되었습니다. 이 페이지에서는 Next.js Build API를 사용하여 관리되거나 자체 호스팅으로 배포하는 방법을 보여줍니다.

Next.js 빌드 API

next build는 제품 환경을 위해 최적화된 버전의 애플리케이션을 생성합니다. 이 표준 출력에는 다음이 포함됩니다.

• getStaticProps 또는 자동 정적 최적화를 사용하는 페이지의 HTML 파일
• 전역 스타일 또는 개별적으로 범위가 지정된 스타일에 대한 CSS 파일
• Next.js 서버에서 동적 콘텐츠를 사전 렌더링하기 위한 JavaScript
• React를 통한 클라이언트 측에서의 상호 작용을 위한 JavaScript

이 출력은 .next 폴더 안에 생성됩니다.

• .next/static/chunks/pages - 이 폴더 내의 각 JavaScript 파일은 동일한 이름의 라우트와 관련이 있습니다. 예를 들어, .next/static/chunks/pages/about.js는 애플리케이션에서 /about 라우트를 보는 경우 로드되는 JavaScript 파일이 됩니다.
• .next/static/media – next/image에서 정적으로 가져온 이미지는 여기에 해싱되어 복사됩니다.
• .next/static/css – 애플리케이션의 모든 페이지에 대한 전역 CSS 파일
• .next/server/pages – 서버에서 사전 렌더링된 HTML과 JavaScript 진입점. .nft.json 파일은 출력 파일 추적이 활성화되었을 때 생성되며 주어진 페이지에 의존하는 모든 파일 경로를 포함합니다.
• .next/server/chunks – 애플리케이션 전체에서 여러 곳에서 사용되는 공유 JavaScript 청크
• .next/cache – 빌드 캐시와 캐시된 이미지, 응답, 페이지에 대한 출력은 Next.js 서버에서 제공됩니다. 캐시를 사용하면 빌드 시간이 단축되고 이미지 로딩 성능이 향상됩니다.

.next 내의 모든 JavaScript 코드는 컴파일되었으며, 브라우저 번들은 최상의 성능을 달성하고 모든 현대 브라우저를 지원하기 위해 최소화되었습니다.

Vercel로 관리되는 Next.js

Vercel은 설정 없이 Next.js 애플리케이션을 배포하는 가장 빠른 방법입니다. Vercel에 배포할 때 플랫폼은 Next.js를 자동으로 감지하고 next build를 실행하며 변경되지 않은 경우 배포간에 캐시된 자산을 유지하는 등의 최적화 작업을 포함하여 빌드 출력을 최적화해줍니다.

추가로, Vercel은 다음과 같은 기능을 제공합니다.

• Next.js Speed Insights와 함께 자동 성능 모니터링
• 자동 HTTPS 및 SSL 인증서
• 자동 CI/CD (GitHub, GitLab, Bitbucket 등을 통해)

Docker 이미지

Next.js는 Docker 컨테이너를 지원하는 모든 호스팅 제공 업체에 배포될 수 있습니다. 이 접근 방식은 Kubernetes나 HashiCorp Nomad와 같은 컨테이너 오케스트레이터에 배포하거나, 어느 클라우드 제공 업체의 단일 노드 안에서 실행할 때 사용할 수 있습니다.

1. 컴퓨터에 Docker 설치
2. with-docker 예제 복제
3. 컨테이너 빌드: docker build -t nextjs-docker .
4. 컨테이너 실행: docker run -p 3000:3000 nextjs-docker

여러 환경에서 다른 환경 변수를 사용해야 하는 경우 with-docker-multi-env 예제를 참고하세요.

정적 HTML 내보내기

Next.js 앱의 정적 HTML 내보내기를 원한다면 정적 HTML 내보내기 문서의 지침을 따르세요.

기타 서비스

다음 서비스들은 Next.js v12+를 지원합니다. 아래에는 각 서비스에 Next.js를 배포하기 위한 예제 또는 가이드가 있습니다.

관리형 서버

• AWS Copilot
• Digital Ocean App Platform
• Google Cloud Run
• Heroku
• Railway
• Render

위에서 보여준 예제처럼 Dockerfile을 사용할 수 있는 관리 플랫폼도 있습니다.

정적만 지원

다음 서비스들은 Next.js를 output: 'export'를 사용하여 배포하는 것만 지원합니다.

• GitHub Pages

또한, GitHub Actions, Jenkins, AWS CodeBuild, Circle CI, Azure Pipelines 등의 CI/CD 파이프라인을 통해 output: 'export'의 출력을 어느 정적 호스팅 제공 업체에나 수동으로 배포할 수 있습니다.

서버리스

• AWS Amplify
• Azure Static Web Apps
• Cloudflare Pages
• Firebase
• Netlify
• Terraform
• SST

모든 서버리스 제공 업체가 next start로부터 Next.js Build API를 구현하지는 않습니다. 지원되는 기능이 무엇인지 제공 업체에게 확인하십시오.

자동 업데이트

Next.js 애플리케이션을 배포할 때, 새로고침 없이 최신 버전을 보려고 합니다. Next.js는 라우팅할 때 배경에서 애플리케이션의 최신 버전을 자동으로 로드합니다. 클라이언트 측 탐색에 대해 next/link는 일시적으로 일반 <a> 태그로 작동합니다.

새 페이지(이전 버전과 함께)가 이미 next/link에 의해 미리 가져온 경우, Next.js는 이전 버전을 사용합니다. 미리 가져오지 않은 페이지로 탐색하거나 CDN 레벨에서 캐시되지 않은 경우 최신 버전을 로드합니다.

수동적인 종료

자체 호스팅을 할 때, 서버가 SIGTERM 또는 SIGINT 신호로 종료될 때 코드를 실행하려고 할 수 있습니다. 환경 변수 NEXT_MANUAL_SIG_HANDLE를 true로 설정한 다음 _document.js 파일 내에서 해당 신호에 대한 핸들러를 등록할 수 있습니다. 환경 변수는 .env 파일이 아닌 package.json 스크립트에 직접 등록해야 합니다.

수동 신호 처리는 next dev에서 사용할 수 없습니다.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "NEXT_MANUAL_SIG_HANDLE=true next start"
  }
}

if (process.env.NEXT_MANUAL_SIG_HANDLE) {
  // 사용자 정의

 _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)
  })
}