로고

Next.js(14) + Vercel 웹페이지 구현

1. 웹페이지를 구현하게 된 계기

2. 구현 방법

3. 느낀 점 및 개선 사항



1. 웹페이지를 구현하게 된 계기


이 웹페이지를 구현하게 된 이유는 '나만의 웹 페이지도 있어야지' 라는 생각이 문득 들자마자 바로 구현했다. 티스토리나 Velog를 사용해봤으나, 커스텀 웹페이지의 장점을 포기할 수 없었다.


무엇보다도 내 웹페이지 이기에 더욱 애정을 담아 글을 남길 수 있어 구현하게 되었다.



2. 구현 방법


어떤 기술스택을 선택하여 구현할지, 기술 스택을 선택했다면 어떻게 구현할 것인지 고민하며 레퍼런스를 찾아보던 중, Next.js와 Vercel을 통해 블로그를 만들었다는 글을 보았다. (미량님의 정적 블로그 만들기)


마침 내가 React와 Next.js를 공부하고 있었기에, 다른 사람이 만든 코드도 살펴보면서 웹 페이지를 만들기로 했다.



- 내가 마주한 이슈들

글에 작성된 코드는 Next.js 12 버전이고, Next.js는 13->14로 버전 업데이트가 되고 있던 시점이라 어떤 버전을 사용해 웹 페이지를 만들지 고민을 많이 했다.


하지만 레거시 코드로 개발하기 보다는 새로운 구조(App Router)를 가진 14버전으로 개발해보고 싶다는 도전 의식이 생겨 주저없이 Next.js 14버전으로 공식문서와 함께 개발을 시작했다.


또, Next.js 14버전으로 구현하려니 contentlayer에 대한 이슈가 참 많았다. contentLayer이 더이상 maintain 되지 않는다는 소식을 contentlayer github Issue에서 발견했다.


contentlayer_issue


시간이 나면 contentlayer가 아닌 다른 mdx파일을 Next.js 파일에 통합할 수 있는 도구를 새로 알아봐야겠다.



마지막으로 코드를 다 짜고 Vercel을 통해 배포하려하니, github 소셜 로그인 부터 막히는 이슈가 있었다. Vercel 팀에게 메일로 해당 사항을 문의 했더니 아래와 같이 답변이 왔다.


새 계정으로 로그인할 수 없는 경우 등록 과정에서 계정이 추가 검토 대상으로 지정되었을 수 있습니다. 플랫폼 남용을 방지하기 위해 Vercel은 계정 가입 과정에서 여러 단계의 보안 및 인증 절차를 적용하고 있으며, 조사 결과에 따라 계정을 승인하지 않거나 추가 검토를 진행하지 못할 수 있습니다.


Vercel 측 요청사항대로 회신했더니, 정상적으로 로그인이 되었고 정상적으로 앱 배포까지 완료했다.



3. 느낀 점 및 개선 사항


내 웹페이지가 생겨 기쁘다! 오류가 없었던 건 아니지만, 모두 해결하고 정상적으로 배포했다는 점이 너무나 기뻤다. 또, 내가 블로그 글을 쓰고 배포를 하면 commit을 하기 때문에 깃심기도 가능하다는 점이 정말 좋았다!


Next.js가 새로운 버전이 나온다면 마이그레이션을 하면서 블로그를 리뉴얼하는 것도 좋을 것 같다! 배포 비용이 많이 든다면, velog나 tistory로 이전하는 것도 고민해봐야겠다.