NextJS 개념 정리 + 영화 정보 사이트 만들고 vercel로 배포하기 (모든 과정 요약 정리)

이번 포스트에서는 NextJS가 무엇인지에 대해 알아보고, NextJS를 이용하여 간단한 영화 정보 사이트를 만들고 실제 웹사이트를 배포하는 과정까지 수행해 보겠습니다.

 

 

완성 결과 미리보기

먼저 완성된 웹사이트의 형태를 같이 보겠습니다.

 

 

 

API를 제공하는, 데이터가 저장된 사이트로부터 데이터를 잘 fetch 해 와서 정보를 잘 나타내어주는 것을 확인할 수 있습니다.

주의깊게 살펴볼 부분은 렌더링이 진행되는 과정에서, 먼저 로딩이 끝난 컴포넌트부터 렌더링이 부분적으로 완료될 수 있다는 것입니다.

(물론 이 부분은 NextJS만의 기능이 아닌 React의 기능을 이용한 것이지만, 이러한 컴포넌트별 렌더링 기능을 포함하여 페이지의 빠른 로딩을 위한 다양한 기능이 사용되므로, 더 좋은 사용자 경험을 제공할 수 있습니다.)

 

 

NextJS와 Server Side Rendering

NextJS는 React의 application을 구축하는 것을 도와주는 프레임워크로, Server Side Rendering(SSR, Server Side Rendering)이라는 페이지 로딩 시간을 줄여주는 기능을 가지고 있습니다.

 

NextJS는 application을 render 하는 방법으로, 'Server Side Rendering'이라는 방법을 사용합니다.

SSR이 일어나는 과정은 다음과 같습니다.

 

① NextJS가 서버(백엔드)에서 Javascript → HTML로 렌더링을 한 다음, 이 HTML 코드를 브라우저에 전달해 줍니다.

이때 주목할 점은, 코드는 HTML의 형식으로 전달되기 때문에 페이지에 Javascript가 적용되지 않은 상태여도 렌더링이 정상적으로 작동한다는 것입니다.

 

② 그 다음 프레임워크가 페이지에 React application을 추가합니다.

이 기능은 각 Component에 해당하는 파일의 맨 위에 "use client"; 라는 코드를 작성하여 선택적으로 추가할 수 있습니다.

여기서 use client란, 이 Component는 클라이언트에서 interactive 해야 함을 의미합니다.

그렇게 되면, 기존에 로드된 HTML 페이지는 그대로 있는 상태로, 여기에 이벤트 리스너 등이 추가되는 것입니다.

→ 이를 (사용자가 최초 HTML을 본 후) 'Hydration이 일어난다'라고 합니다.

 

 

NextJS로 영화 정보 사이트 제작하기

먼저 저는 NextJS 프로젝트를 작성하여 아래와 같은 Repository에 push 해 두었습니다.

전체적인 프로젝트 코드는 노마드코더의 'NextJS 시작하기' 코스를 통해 학습하면서 작성하였습니다!

 

GitHub - yeohj0710/NextJS-movie-app: movie application built using NextJS

 

소스 코드는 위의 Repository에서 참고하시면 됩니다.

 

(NextJS의 프로젝트 구성에 대한 설명과 코드에 대한 설명은 이후에 추가할 예정입니다.)

이 포스트에서는 '배포'에 대한 부분을 조금 더 중점적으로 다룹니다.

 

 

NextJS 프로젝트 배포하기

작성이 완료된 프로젝트는 Vercel에서 무료로 배포할 수 있습니다.

여기서 Vercel은 NextJS를 개발한 기업입니다.

 

웹사이트 배포를 위해, 'vercel.com'으로 이동해 주시면 됩니다.

 

 

 

vercel의 메인 페이지로 들어가서, 중앙에 보이는 'Start Deploying'을 눌러줍니다.

 

 

 

'Continue with Github'를 선택합니다.

Github에 프로젝트를 업로드 한 후, 해당 Repository를 vercel에 연결하면 vercel에서 자동으로 배포를 진행하고 도메인을 제공해 주는 방식으로 배포가 진행될 것입니다.

 

 

 

Github 계정 인증을 진행한 이후에, NextJS 프로젝트가 push 되어 있는 Repository를 선택해 줍니다.

 

 

 

주의할 점은 이 부분 정도인데, vercel에서 NextJS 프로젝트를 배포할 때 미리 default 값으로 지정해 둔 명령어에 맞게 package.json의 scripts들을 맞춰서 작성해 두어야 합니다.

또는 Vercel 페이지에서 직접 명령어를 수정하면 됩니다.

 

 

 

배포가 완료되면 위의 이미지와 같이 초록색 원이 뜨면서 'Ready'가 나타납니다.

 

 

 

'Project' 탭에서 deployment 결과를 확인할 수 있습니다.

빨간 네모 박스를 친 부분을 클릭하면, 특정 형식을 벗어나지 않는 선에서 도메인을 직접 지정할 수도 있습니다.

 

 

 

생성된 도메인으로 이동해 보면, build와 배포가 정상적으로 완료되어 인터넷으로 정상 접속 및 이용이 가능한 것을 확인할 수 있습니다.

 

이렇게 해서 NextJS가 무엇인지 알아보고, NextJS를 이용해 영화 정보 웹사이트를 제작 및 배포까지의 과정을 간단하게 다루어보았습니다.