Next.js로 랜딩페이지 만들기, 배포까지 30분 실전 가이드

아이디어는 떠올랐는데 "일단 보여줄 페이지부터 하나 띄우자" 하고 막히는 순간이 있어요. 디자인 툴 켜고, 호스팅 알아보고, 도메인 검색하다 보면 반나절이 사라지죠. 혹시 그런 적 없나요.

저도 작은 서비스 페이지를 여러 번 띄워보면서 느낀 게 있어요. 처음 한 장짜리 랜딩페이지는 도구를 적게 쓸수록 빨리 끝난다는 거예요. Next.js 하나면 만드는 것부터 배포까지 한 줄기로 이어집니다.

준비물은 세 가지면 충분해요

• Node.js (LTS 버전이면 돼요)
• 깃허브 계정
• 배포용 계정 (Vercel을 쓰면 깃허브와 바로 붙어요)

뭔가 더 깔아야 할 것 같지만 여기까지예요. 나머지는 명령어 한 줄이 알아서 해줍니다.

프로젝트 만들기

터미널에 아래 한 줄을 입력해요.

npx create-next-app@latest my-landing

몇 가지를 물어보는데, 잘 모르겠으면 기본값(엔터)으로 넘어가도 괜찮아요. App Router 구조로 폴더가 생기고, npm run dev를 치면 로컬에서 바로 화면이 떠요. 브라우저에서 첫 페이지가 보이면 절반은 끝난 셈이에요.

화면은 한 파일부터

랜딩페이지 한 장은 app/page.tsx 파일 하나만 고쳐도 충분해요. 제목, 한 줄 소개, 버튼 정도만 있으면 시작으로는 부족하지 않아요. 처음부터 컴포넌트를 잘게 나누거나 상태 관리 라이브러리를 붙일 필요는 없어요. 페이지가 한 장일 땐 그게 오히려 짐이 돼요.

스타일은 같이 설치되는 Tailwind를 쓰면 클래스만 붙여 빠르게 모양을 잡을 수 있어요. 색과 여백만 정리해도 보여줄 만한 화면이 나와요.

배포가 가장 쉬운 부분이에요

만든 코드를 깃허브 저장소에 올린 다음, Vercel에서 그 저장소를 불러오기만 하면 돼요. Next.js를 만든 곳이라 별도 설정 없이 알아서 빌드하고 주소를 하나 내줍니다. 그 뒤로는 코드를 push할 때마다 새 버전이 자동으로 올라가요. 배포 버튼을 따로 누르지 않아도 되는 셈이죠.

여기까지 오면 something.vercel.app 같은 주소로 누구에게나 페이지를 보낼 수 있어요.

도메인은 마지막에 붙여요

직접 산 도메인이 있다면 배포 설정에서 연결하고, 안내해주는 DNS 값 몇 개를 도메인 업체에 등록하면 끝나요. 반영에 시간이 조금 걸릴 수 있으니, 도메인은 페이지를 다 띄운 뒤 마지막에 붙이는 걸 추천해요. 먼저 동작을 확인하고 주소만 갈아 끼우는 순서가 마음이 편해요.

마무리

랜딩페이지 한 장은 거창한 준비보다 일단 띄워보는 게 빨라요. 만들고, push하고, 주소를 받는 흐름을 한 번 익혀두면 다음부턴 더 짧아져요. 저도 라이프케어로그의 플랜비(plan-b)나 플랜티(plan-t) 같은 작은 도구 페이지를 이런 식으로 가볍게 올려두고 반응을 보면서 다듬고 있어요.

완벽한 페이지를 한 번에 만들기보다, 오늘 한 장을 띄우고 내일 한 줄씩 고치는 쪽이 결국 더 멀리 가더라고요.