리액트는 싱글 페이지에서는 초기 렌더링 시, 모든 컴포넌트를 내려받기 때문에 규모가 커지면 로딩 속도가 제한될 수 있다. Next.js는 파일을 분리해서 이런 문제를 해결한다. (pages 폴더 > 각 page, Components 폴더 > React component)
아래의 설명으로 작동 방식을 더 자세히 이해할 수 있다.
1. 사용자가 처음 페이지를 접속을 요청 했을때 Next.js 서버는 사용자에게 렌더링 될 HTML을 응답 값으로 보내준다. (SSR 방식)
2. 그 후 브라우저는 추가적인 js bundle을 다운 받아 실행한다.
3. 사용자가 해당 페이지에서 다른 페이지로 이동할때는 Next.js에 서버가 아닌 브라우저에서 처리하여 이동하게 한다. (CSR 방식)
[1. 파일 이름에 따른 routing]
pages 폴더 안에 있는 파일명에 따라 route가 결정된다.
폴더 안에 파일이 있으면 / 로 구분된다.
[2. Link 태그로 이동]
[3. Global state]
pages 폴더 안에 _app.js 파일을 만든다. (File name is mandatory.)
_app.js의 형식은 {Component, pageProps} 두 개의 인자를 받아야 한다. <Component.. > 이 부분도 일종의 규칙이다. (This is just a rule.)
_app.js 페이지에 style을 지정하면 global로 지정된다.
[4. Layout component]
Layout component를 만들어서 children을 props로 넘겨준다. 다시 pages > _app.js에서 Layout으로 감싸주면, 모든 페이지에서 Navbar을 볼 수 있다.
