[Next JS] Next JS 시작하기

 React는 CSR(클라이언트 사이드 렌더링) 방식으로 SPA(싱글 페이지 어플리케이션)를 만들 수 있는 프레임워크입니다. (오늘부터는 존댓말을 쓰기로 했습니다.) CSR 방식인 그냥 리액트의 경우 브라우저가 서버에서 html과 정적 파일을 받아온 후 데이터를 요청해서 받아와 렌더링합니다. 초기에 정적 파일을 다 받아오기 때문에 데이터 요청이 있을 때만 서버에 요청하면 됩니다. 또, JS로 화면에 렌더링되기 때문에 JS를 크롤링 할 수 없는 검색엔진에서는 검색엔진 최적화가 어렵습니다.

 Next JS는 React 기반으로 만들어진 프레임워크입니다. Next JS를 이용하면 리액트에서 SSR(서버 사이드 렌더링) 방식으로 렌더링을 할 수 있습니다. SSR은 초기에 필요한 데이터를 미리 가져와 데이터가 채워진 html를 반환합니다. 따라서 SSR의 경우 CSR과 달리 서버에 요청이 있을 때마다 새로운 html 파일을 받아옵니다. 서버 부하가 큰 대신, 검색 엔진 최적화가 수월합니다. Next JS는 SSR만 할 수 있는 건 아니고, 당연히 리액트 프레임워크이기 때문에 CSR도 지원합니다. 각 방식에서 필요한 부분만 사용할 수 있습니다. 또 Polyfill을 지원해서 크로스 브라우징이 수월합니다.

 SSR은 서버 부하가 크고 익숙한 React에 비해 Next JS의 러닝 커브가 있다는 단점이 있지만, 개발해야 하는 서비스가 검색 엔진 최적화와 Polyfill로 얻을 수 있는 이득이 더 많다고 판단해 선택하게 되었습니다. (CSR 방식으로 렌더링할 경우에는 그냥 리액트 코드 짜듯이 할 수 있습니다.)

 

 아래와 같이 프로젝트를 시작합니다.

 

$ npx create-next-app --example with-typescript <프로젝트명>

 

 프로젝트 생성 후

 

$ npm run dev

 

 실행해 보면

 

 이렇게 뜹니다. 와~

 

 localhost:3000/users로 들어가면 이런 User List 페이지가 나옵니다.

 

 pages/users/[id].tsx로 들어가보면 이런 코드가 있습니다. getStaticPaths는 정적 패스를 생성해주고, getStaticProps는 getStaticPaths에서 return한 paths들을 인자로 받아 props를 생성합니다. 여기서 생성된 props가

 

 빌드 타임에 여기에서 props로 들어가서 페이지를 생성해주는 거에요.

 

 Next JS가 api 서버의 역할도 할 수 있다고 하네요. api/users에 들어가보면 이런 코드가 있는데요. 예시 코드에서는 api 요청을 보내는 부분은 찾을 수 없었답니다. 그냥 이렇게 쓸 수 있다고 보여주는 것 같았어요 👀

...

 이번 프로젝트에 Next JS를 쓰게 되어서 소개해 보았습니다. 더 알게 된 내용이 있으면 또 포스팅하도록 하겠습니다.