[Next.js 시리즈 #5] 피날레: Vercel로 세상에 내 웹사이트 공개하기

안녕하세요! 드디어 여기까지 오셨군요. 프로젝트 생성부터 데이터 페칭(Data Fetching), 그리고 나를 알리는 소개 페이지까지 완성한 여러분, 정말 고생 많으셨습니다.

오늘은 이 시리즈의 마지막 단계로, 내 컴퓨터에서만 보이던 웹사이트를 전 세계 누구나 접속할 수 있도록 **배포(Deployment)**해 보겠습니다. 클릭 몇 번으로 끝나는 마법 같은 과정을 함께 시작해 보시죠!

Table of Contents

웹사이트를 배포하기 위해 가장 먼저 해야 할 일은 내 코드를 GitHub에 올리는 것입니다.

Next.js를 만든 팀에서 운영하는 배포 플랫폼인 Vercel은 GitHub과 연결했을 때 진정한 위력을 발휘합니다. 우리가 GitHub에 코드를 올리기만 하면, Vercel이 이를 감지해 자동으로 웹사이트를 업데이트해 주기 때문이죠.

4부에서 실제 API(TMDB 등)를 사용했다면 API Key 보안이 정말 중요합니다. GitHub은 전 세계에 공개되는 공간이므로, 비밀번호 같은 정보를 코드에 직접 적어 올리면 안 됩니다.

환경 변수 설정: 프로젝트 루트의 .env.local 파일에 비밀 키를 보관하세요.
.gitignore 확인: .env* 파일이 목록에 들어있어 GitHub에 업로드되지 않는지 꼭 확인해야 합니다.
Vercel 설정: 배포 과정 중 ‘Environment Variables’ 섹션에 해당 키를 동일하게 입력해 주면 서버에서 안전하게 호출할 수 있습니다.

Step 1. GitHub에 코드 푸시(Push) 터미널을 열고 내 프로젝트를 본인의 GitHub 저장소에 올립니다.

git add .
git commit -m "Next.js 사이트 첫 배포"
git push origin main

Step 2. Vercel에서 GitHub 설치(Install) 및 권한 승인 Vercel 홈페이지에 접속해 GitHub 계정으로 로그인합니다.

[Add New] -> [Project]를 클릭하면 왼쪽 사이드바에 [Install Next.js (또는 계정명)] 버튼이 보입니다.
이 버튼을 누르면 GitHub 사이트로 이동하며, Vercel이 내 저장소에 접근할 수 있도록 ‘열쇠(권한)’를 주는 과정을 거칩니다. (특정 저장소만 선택하거나 전체를 선택할 수 있습니다.)

Step 3. 프로젝트 가져오기(Import) 및 최종 배포 권한 승인이 끝나면 대시보드에 내 저장소 목록이 뜹니다.

배포가 끝났다고 끝이 아닙니다! 내 사이트가 검색 엔진에 잘 걸리도록 다듬어주어야 합니다.

SEO 점수 확인: 브라우저 개발자 도구의 Lighthouse 탭을 실행해 보세요. 우리가 설정한 메타데이터가 점수에 잘 반영되었는지 확인할 수 있습니다.
Next.js의 강점 활용: 이미지는 <img> 대신 Next.js의 <Image /> 컴포넌트를 사용하여 용량을 최적화하고 속도를 높여보세요.

첫 설치부터 배포까지, 결코 짧지 않은 여정이었습니다. 이제 여러분은 단순히 코드를 짜는 단계를 넘어, 실제 서비스를 운영하는 개발자로서 첫발을 내딛게 되었습니다.

이 웹사이트는 여러분의 성장에 따라 계속해서 발전할 것입니다. 앞으로 더 멋진 기능을 추가하고, 더 깊이 있는 기록을 남기시길 진심으로 응원합니다.

그동안 Next.js 시리즈를 함께해주셔서 감사합니다!

감사합니다.