Next.js

React.js의 CSR(Client-Side-Rendering)의 단점인 FCP(First-Componet-Paint)의 속도를 줄인 사전 렌더링을 도입한 React.js기반 프레임 워크이다.

CSR

Client-Side-Rendering으로 아래와 같은 방식으로 진행이 된다

장점

초기 접속 이후 페이지 이동이 매우 빠르고 쾌적하다

단점

초기 접속 속도가 느리다

FCP

first-contentful-paint로 요청 시작 시점으로부터 컨텐츠가 처음 나타나는데 걸리는 시간이다.

사전 렌더링

브라우저 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식이다.

CSR의 FCP 문제를 해결하기 위해 Next.js에서 도입하였다

Page Router

React Router 처럼 페이지 기반 라우터 제공한다.

pages 폴더의 구조를 기반으로 페이지 라우팅을 제공

동적 경로

• 폴더 아래에 [id].js와 같이 선언하면 "item/1"처럼 동적으로 경로 설정이 가능하다

• [...id].js 와 같이 선언하면 "item/1/21/33" 처럼 뒤에 여러개의 id가 연달아 나올 수 있다.
  "item/" 과 같이 라우팅을 하면은 접속이 안된다.

  /1/과 같은 부분을 Catch All Segment라고 불린다.
  
  /1/21/33같은 부분은 id 라는 이름에 배열 형태로 저장이 된다.

• [[...id]].js
  "item/" 과 같이 라우팅을 하면은 접속이 안되는 부분을 해결 할 수 있다.

Optional Catch All Segment
슬래쉬 뒤에 어떤 경로든 모두 대응한 상태

404.tsx

존재하지 않는 404 페이지를 만들 수 있다.