Pages

Next.js 프레임워크에서, routes는 파일명으로 한다.
대신, / (root route)는 index.js 파일이다. 그리고 반드시 컴포넌트는 export default 해주어야 한다.

아래 코드가 join.js 파일안에 있는 함수 컴포넌트라고 하장.
이 때, 함수 컴포넌트 이름은 뭘로하든 상관없다. 라우트랑 관련없음.

export default function Join() {
  return "Join";
}

"파일 이름" 이 route니까, localhost:3000/join 을 하면 위 컴포넌트가 웹페이지에 뜰 것이다. 👍

Pre-Rendering

next.js 프레임워크로 만들어진 웹 페이지는 Pre-Rendering 이라는 강력한 기능이 있다고한다.

일반 리액트 앱은, 웹 페이지가 처음에 실행 될 때, 브라우저가 자바스크립트를 불러오기전에는 그냥 흰 화면이다. 우리가 리액트로 웹을 만들때,

<div id="root"></div>

이 root div 안에서 우리가 코딩한것들이 렌더링 된다. 근데 이것도 자바스크립트 파일을 로딩하고 나서 하는것임! 즉, 자바스크립트가 로딩이 되기전에는 비어있다는거!! 그러니까 아주 네트워크 환경이 안좋은 유저가 있다면, 처음에 흰 화면을 보고 오래기다려야 한다는거다..

근데 next.js는 pre-rendering 이라는 강력한 기능으로 이를 막아준다.
즉 자바스크립트 파일이 로딩되지않아도, 동적인 기능은 없지만, 짜 놓은 HTML요소들은 화면에 나타나게해주는것이다.