Next.js 프로젝트를 외부 공개로 만들기 위해 Vercel을 사용하면 쉽습니다.
Github의 리포지토리와 함께 작동하면 자동으로 배포됩니다.
개인적이고 비영리적인 목적으로만 이용하면 무료입니다.

Next.js 프로젝트 만들기

알맞은 프로젝트를 만든다.

$ yarn create next-app

프로젝트 이름은 여기에서 vercel-test로 지정되었습니다.

✔ What is your project named? … vercel-test

github과 프로젝트를 연동시킨다.

Vercel은 github과 연동하여 코드를 수정 한 후 자동으로 배포 할 수 있습니다.

vercel-test라는 리포지토리를 만들어 로컬 프로젝트를 푸시합니다.

$ git remote add origin https://github.com/アカウント名/vercel-test.git
$ git branch -M main
$ git push -u origin main

Vercel에 계정을 만들고 프로젝트 만들기

htps: // 코m/

Vercel 계정이 없으면 Github 계정과 함께 Vercel에 계정을 등록합니다.
개인적이고 비영리적인 목적으로만 이용하면 무료입니다.
등록 또는 로그인 후 대시보드에서 NewProject를 클릭합니다.


가져올 리포지토리를 선택합니다.



가져온 리포지토리를 Vercel에서 만들 수 있는 팀이나 개인 계정으로 선택하여 연결할 수 있다. 여기에서는 Github의 개인 계정을 선택.



프로젝트명이나 빌드의 커멘드명, 환경 변수의 설정등을 할 수 있습니다. 설정하지 않을 경우 그대로 Deploy를 누릅니다.



Vercel에서 자동으로 프로젝트 배포가 시작됩니다.



잠시 후 색종이가 춤추고 배포 완료! !


Visit을 눌러 도메인을 만들고 프로젝트의 프로덕션 사이트를 볼 수 있습니다.

대시보드 살펴보기

대시보드에서는 Overview에서 Github와의 연계 확인 등 전체 개요, Deployments에서 Deploy시 정보, Analytics에서 성능 측정 등을 확인할 수 있습니다.

코드 변경이 프로덕션에 반영되는지 확인합니다.

pages/index.js의 Next.js로 작성된 제목을 Vercel Test Page로 변경하여 푸시해 봅니다.



대시보드의 Deployments를 확인해 보면 반영되는 모습.



Ready가 되고 있는 것을 확인하고 Visit를 눌러 보면・・・



새 도메인에서 코드 수정이 반영된 페이지가 만들어졌습니다. 코드 변경 후 푸시한 후 배포하는 데 30초가 걸리지 않았습니다.

요약

Next.js 프로젝트를 쉽게 배포하는 데 Vercel이 유용합니다.

Github 연동으로 리포지토리에 푸시한 후 짧은 시간에 배포할 수 있다.

Vercel은 개인적이고 비영리적인 목적으로만 사용하는 경우 무료입니다.