👇 Momojito에 대해 자세히 알아보러 가시려면?👇
배포 주소 , Github Repo, 서비스 발표 영상
기획 단계를 마무리하고 본격적인 개발에 들어가면서 가장 먼저 한 것은 React에서 Next.js 프레임워크를 이용하기 위한 환경을 세팅하는 것이었습니다.
Next.js는 Dynamic Routing과 Pre-Rendering을 기반으로, 빌드 시점에 정적인 html 페이지들을 생성해서 깜빡임 없는 빠른 페이지 전환을 가능하게 하는 프레임워크입니다.
서버 사이드 랜더링과 클라이언트 사이드 랜더링을 필요에 따라 이용할 수 있도록 지원하며, 각 페이지마다 SEO를 최적화시키는데 유용합니다.
팀원 중 도현님께서 이런 신문물의 존재와, 칵테일 요소마다 상세페이지를 가지게 되는 저희 프로젝트 구조에 적용하기 적합하다는 점을 설명해주셔서, 주저없이 사용해보기로 결정하였습니다.
코드스테이츠 정규 과정에서 배우지 않았던 스택이라 세팅부터 막막했지만, 공식문서 번역에 투자했던 하루이틀의 시간과, 이미 어느정도 next.js 컨셉에 대해 이해를 하고 계셨던 팀원분 덕분에 프로젝트에 적용할 수 있었습니다.
파일 시스템 기반의 라우팅으로, 폴더 구조를 세팅하기 편리하다. (Dynamic Routing)
create-next-app 명령어를 이용하여 초기 환경을 셋업하고 나서, pages 디렉토리 안에 리액트 컴포넌트 파일을 생성하면, 해당되는 파일명에 따라 라우팅 페이지가 자동으로 생성됩니다. 따라서 라우팅 구조를 만드는 방식이 이전에 사용했던 React-dom-router 보다 상당히 간편했습니다.
주어진 데이터에 따라서 라우팅을 하는 것도 가능합니다. pages 디렉토리 안에 새로운 디렉토리를 생성 후 대괄호로 감싼 [id].js파일을 만들고 json 형식으로 된 데이터에서 id값을 넘겨받게 되면, 데이터에 있는 모든 id 값에 따라 라우팅이 구성됩니다. 다이나믹 라우팅 기능을 이용하여 제품의 상세페이지같은 서비스들의 동적 페이지 생성이 가능해집니다.
Static Site Generation을 통해 빠른 페이지 전환이 가능하다
Static-Site Generation는 Pre-rendering 방식 중 하나입니다. getStaticProps 메소드를 통해 동적인 데이터를 받을 수 있고, 빌드 시점에 HTML파일들을 생성하며, 생성된 html파일을 모든 유저가 동일하게 내려받게 됩니다. 각 페이지마다 생성된 정적인 html파일들을 배포하게 되면 페이지들간 전환 시 딜레이타임이 눈에띄게 줄어듭니다.
getStaticPaths 메소드를 이용하면, Dynamic routing 으로 생성된 모든 페이지들을 정적으로 생성할 수 있습니다.
SEO 최적화에 유리하다
Next.js를 이용하면 필요한 부분만 렌더링하여 페이지마다 메타태그 설정에 어려움이 있는 기존 SPA의 단점을 보완할 수 있습니다.
Static Site를 통해 모든 html을 미리 생성할 때, 각 상세페이지마다 쉽게 메타태그를 설정해줄 수 있어서, 검색엔진에서 검색 시 모든 페이지마다 메타태그 내에 정보들이 노출될 수 있도록 해주는 효과를 얻을 수 있습니다.
