[공식문서] NextJS - Deploying Your Next.js App

이 마지막 기본 레슨에서는 Next.js 앱을 프로덕션 환경에 배포하는 방법을 알아보겠습니다.

Next.js의 창시자들이 만든 플랫폼인 Vercel에 Next.js 앱을 배포하는 방법을 배우겠습니다. 또한 다른 배포 옵션에 대해서도 이야기할 것입니다.

 

사전 준비: 이 레슨을 수강하려면 GitHub 계정이 필요합니다.

 

이 레슨에서 다음을 배우게 됩니다.

• Next.js 앱을 Vercel에 배포하는 방법
• DPS 워크플로우: 개발(Develop), 미리보기(Preview), 배포(Ship)
• Next.js 앱을 자체 호스팅 제공 업체에 배포하는 방법

시작 코드 다운로드(선택 사항)

이전 레슨에서 진행 중이 아니라면 다음 레슨을 위해 시작 코드를 다운로드하고 설치하고 실행할 수 있습니다. 이렇게 하면 이전 레슨의 결과와 동일한 nextjs-blog 디렉토리가 설정됩니다.

 

다시 말하지만, 이전 레슨을 완료했다면 이 단계는 필요하지 않습니다.

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/basics-final"

그런 다음 명령 출력에서 지침을 따르십시오(디렉토리로 이동하여 개발 서버를 시작하십시오).

 

또한 다음 파일을 업데이트해야 합니다.

• public/images/profile.jpg: 자신의 사진으로 업데이트(권장 크기: 400px 너비/높이).
• components/layout.js 파일에서 const name = '[Your Name]'을 자신의 이름으로 업데이트하세요.
• pages/index.js 파일에서 <p>[Your Self Introduction]</p>을 자기 소개로 업데이트하세요.

GitHub에 푸시하기

배포하기 전에 Next.js 앱을 GitHub에 푸시합시다. 아직 이 작업을 수행하지 않았다면 배포가 더 쉬워집니다.

• 개인 GitHub 계정에서 nextjs-blog라는 새 리포지토리를 만듭니다.
• 리포지토리는 공개(public) 또는 비공개(private)로 설정할 수 있습니다. README 또는 다른 파일로 초기화할 필요는 없습니다.
• 리포지토리를 설정하는 데 도움이 필요하다면 GitHub의 이 가이드를 확인하세요.

 

그런 다음 다음 단계를 수행하세요.

• Next.js 앱에 대한 로컬 git 리포지토리를 아직 초기화하지 않았다면 지금 초기화하세요.
• Next.js 앱을 GitHub 리포지토리로 푸시합니다.

GitHub로 푸시하려면 다음 명령을 실행할 수 있습니다(<username>을 GitHub 사용자 이름으로 바꿉니다):

git remote add origin https://github.com/<username>/nextjs-blog.git
git push -u origin main

GitHub 리포지토리가 준비되면 다음 페이지로 계속하세요.

 

Vercel로 배포하기

Next.js를 프로덕션 환경에 가장 쉽게 배포하는 방법은 Next.js의 개발자들이 개발한 Vercel 플랫폼을 사용하는 것입니다.

 

Vercel은 헤드리스 콘텐츠, 커머스 또는 데이터베이스와 통합되도록 구축된 정적 및 하이브리드 애플리케이션의 서버리스 플랫폼입니다.

Vercel을 사용하면 프론트엔드 팀이 성능을 기본값으로 삼은 사용자 경험을 개발, 미리보기 및 배포할 수 있습니다. 무료로 시작할 수 있으며 신용카드가 필요하지 않습니다.

Vercel 계정 만들기

먼저 https://vercel.com/signup에 방문하여 Vercel 계정을 만듭니다. "GitHub로 계속"을 선택하고 가입 프로세스를 따릅니다.

 

nextjs-blog 리포지토리 가져오기

가입이 완료되면 Vercel에서 nextjs-blog 리포지토리를 가져옵니다. 다음 링크에서 수행할 수 있습니다:

https://vercel.com/import/git.

• Vercel을 GitHub에 설치해야 합니다. 모든 리포지토리에 액세스 권한을 부여할 수 있습니다.
• Vercel을 설치한 후 nextjs-blog을 가져옵니다.

다음 설정에 대해 기본값을 사용할 수 있으며 아무것도 변경할 필요가 없습니다. Vercel은 자동으로 Next.js 앱을 감지하고 최적의 빌드 설정을 선택합니다.

• 프로젝트 이름
• 루트 디렉토리
• 빌드 명령
• 출력 디렉토리
• 개발 명령

배포할 때 Next.js 앱이 빌드되기 시작합니다. 약 1분 이내에 완료되어야 합니다.

 

도움말 제공: 배포가 실패한 경우 GitHub 토론에서 언제든 도움을 얻을 수 있습니다. 배포에 대한 자세한 내용은 Vercel 문서를 참조하세요.

 

완료되면 배포 URL을 받게 됩니다. URL 중 하나를 클릭하면 Next.js 스타터 페이지가 실시간으로 표시됩니다.

 

축하합니다! 이제 Next.js 앱을 프로덕션 환경에 배포했습니다.

다음 페이지에서는 Vercel 및 권장하는 워크플로의 세부 정보를 살펴보겠습니다.

 

Next.js와 Vercel

Vercel은 Next.js의 개발자들에 의해 개발되었으며 Next.js를 완벽하게 지원합니다. Next.js 앱을 Vercel에 배포하면 기본적으로 다음과 같은 일이 발생합니다:

• 정적 생성(Static Generation)을 사용하는 페이지와 자산(JS, CSS, 이미지, 폰트 등)은 Vercel Edge Network에서 자동으로 제공되므로 빠릅니다.
• 서버사이드 렌더링과 API 라우트를 사용하는 페이지는 자동으로 격리된 서버리스 함수로 변환됩니다. 이를 통해 페이지 렌더링 및 API 요청이 무한히 확장됩니다.

 

Vercel에는 많은 기능이 포함되어 있으며 다음과 같은 기능이 있습니다:

• 사용자 정의 도메인: Vercel에 배포한 후 Next.js 앱에 사용자 정의 도메인을 할당할 수 있습니다. 문서를 참조하세요.
• 환경 변수: Vercel에서 환경 변수를 설정할 수도 있습니다. 문서를 참조하세요. 그런 다음 Next.js 앱에서 이 환경 변수를 사용할 수 있습니다.
• 자동 HTTPS: HTTPS가 기본적으로 활성화되며(사용자 정의 도메인 포함) 추가 구성이 필요하지 않습니다. SSL 인증서를 자동으로 갱신합니다.
•  

더 많은 내용은 Vercel 문서에서 확인할 수 있습니다.

 

모든 푸시에 대한 미리보기

배포 아래의 단계는 선택 사항입니다. 직접 시도하거나 읽기만 해도 됩니다.

 

Vercel에 배포한 후 다음을 시도해 보세요(할 수 있는 경우):

• 앱에서 새 브랜치를 만듭니다.
• 일부 변경 사항을 가하고 GitHub에 푸시합니다.
• 새로운 풀 리퀘스트를 만듭니다(GitHub 도움말 페이지).

풀 리퀘스트 페이지에서 vercel 봇에 의한 코멘트를 볼 수 있어야 합니다.

NextJS 공식문서 - vercel 봇 코멘트 확인

 

이 코멘트 내부의 미리보기 URL을 클릭해 보세요. 방금 한 변경 사항이 표시될 것입니다.

 

풀 리퀘스트가 열려 있는 경우 Vercel은 각 푸시에 대한 미리보기 배포를 자동으로 생성합니다. 미리보기 URL은 항상 최신의 미리보기 배포를 가리킵니다.

 

이 미리보기 URL을 공동 작업자와 공유하고 즉각적인 피드백을 받을 수 있습니다.

 

미리보기 배포가 좋아 보인다면 main 브랜치로 병합하세요. 이렇게 하면 Vercel이 자동으로 프로덕션 배포를 생성합니다.

 

개발, 미리보기, 배포

우리는 DPS(Develop, Preview, Ship) 워크플로우를 통해 방금 개념을 소개했습니다.

• 개발(Develop): 우리는 Next.js에서 코드를 작성하고 Next.js 개발 서버를 실행하여 핫 리로딩 기능을 활용했습니다.
• 미리보기(Preview): 우리는 변경 사항을 GitHub의 브랜치에 푸시하고 Vercel이 URL을 통해 미리보기 배포를 생성했습니다. 코드 리뷰뿐만 아니라 배포 미리보기도 수행할 수 있습니다.
• 배포(Ship): 우리는 풀 리퀘스트를 main으로 병합하여 프로덕션으로 배포했습니다.

Next.js 앱을 개발할 때 이 워크플로우를 강력히 추천합니다. 이를 통해 앱을 보다 신속하게 개발할 수 있습니다.

 

다른 호스팅 옵션

Next.js는 Node.js를 지원하는 모든 호스팅 제공 업체에 배포할 수 있습니다.

지금까지의 지침을 따르셨다면 package.json에 다음과 같은 build 및 start 스크립트가 있어야 합니다:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

자신의 호스팅 제공 업체에서는 .next 폴더에 프로덕션 애플리케이션을 빌드하는 build 스크립트를 한 번 실행합니다.

npm run build

빌드 후 start 스크립트는 정적으로 생성된 페이지와 서버사이드 렌더링된 페이지, 그리고 API 라우트를 모두 지원하는 Node.js 서버를 시작합니다.

npm run start

 

팁: package.json의 start 스크립트를 업데이트하여 PORT 매개변수를 허용하도록 사용자 정의할 수 있습니다. 다음과 같이 업데이트하실 수 있습니다: "start": "next start -p $PORT".

 

여기까지입니다! Next.js를 배포하는 데 관한 질문이 있다면 GitHub Discussions에서 커뮤니티에 질문할 수 있습니다.

 

최종

모든 기본 레슨을 완료하셨습니다! 다음은 권장되는 단계입니다.

Next.js 앱 공유

이 튜토리얼에서 구축한 앱을 Twitter에서 공유하는 것을 권장합니다. 그렇게 하려면 저희 팀인 @vercel에 언급해주시기 바랍니다. 그러면 우리가 확인할 수 있을 것입니다! 또한 이 튜토리얼에 대한 피드백을 받는 것을 환영합니다.

Next.js에서 TypeScript 사용

만약 TypeScript를 사용하고 싶다면, TypeScript를 Next.js와 함께 사용하는 방법을 여기에서 배울 수 있습니다.

다음에 무엇을 배워야 할까요?

더 자세한 정보를 알아보려면 저희 문서를 살펴보세요. 특히 다음 페이지들이 흥미로울 것입니다.

• 데이터 가져오기: 데이터 가져오기에 대해 자세히 알아보세요.
• 환경 변수: 내장된 환경 변수 지원에 대해 더 자세히 알아보세요.
• 검색 엔진 최적화: Next.js 애플리케이션의 SEO를 최적화하는 방법을 배워보세요.

대화에 참여하세요

Next.js와 관련된 모든 것에 대한 질문이 있다면 언제든지 GitHub Discussions에서 커뮤니티에 질문하실 수 있습니다.