[next.js 공식문서] 01. Fundamentals

next.js 13버전 때 학습내용 정리 문서로 현재와 다름 주의

Fundamentals

용어

• 트리 : 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조
• 하위트리 : 새 루트(첫번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부
• 루트 : 루트 레이아웃 같은 트리 또는 하위 트리의 첫번째 노드
• 리프 : 자식이 없는 하위 트리의 노드
• URL 세그먼트 : 도메인이 아닌 /로 구분된 URL 경로의 일부
• URL path : 도메인 뒤에 오는 URL의 일부 (세그먼트로 구성)

app 디렉토리

• 새 라우터는 app 디렉토리에서 동작
• 기존 pages 경로와 함께 사용가능하나 URL path가 겹치면 안됨
• 기본적으로 컴포넌트는 서버 컴포넌트임. 클라이언트 컴포넌트를 사용할수도 있음. ( “use client” 선언 )

app 내부 폴더 및 파일

• 폴더는 경로를 정의하는데 사용. 해당 경로의 파일명은 page.js로 통일
• 파일은 Path 세그먼트에 표시되는 UI를 만드는데 사용됨.

경로 구간 (Route segment)

• / : app 폴더
• /dashboard : app - dashboard 폴더
• /dashboard/settings : app - dashboard - settings 폴더

중첩 경로

폴더를 서로 중첩(하위 폴더로)하여 경로를 설정할 수 있음.

파일 규칙

• page.js : 경로의 UI를 만들고 공개적으로 억세스 할수 있도록 함.
• route.js : 경로에 대한 서버 측 api endpoint를 만듬
• layout.js : 세그먼트 및 하위 UI에 대한 공유 UI를 생성.
• template.js : 주소 바꼈을 시 다시 마운트 된다는 것 빼고 layout.js와 동일
• loading.js : 세그먼트 및 해당 하위에 대한 로딩 UI 생성
• error.js : 세그먼트 및 하위에 대한 오류 UI
• global-error.js : error.js와 비슷하지만 루트에서 오류를 잡는데 사용
• not-found.js : noutFount 함수가 경로 세그먼트 내에서 발생하거나 URL 이 어떤 경로와도 일치 않을 때

컴포넌트 계층

• layout.js
• template.js
• error.js(반응 오류 경계)
• loading.js(리액트 서스펜스 경계)
• not-found.js(반응 오류 경계)
• page.js또는 중첩layout.js

순서로 렌더링됨.
세그먼트의 컴포넌트는 상위 세그먼트의 컴포넌트 내에 children으로 들어감.

코로케이션

폴더안엔 컴포넌트, 스타일시트, 테스트 등을 함께 넣을 수 있음.

클라이언트 측 탐색을 통한 서버 중심 라우팅

• 기존 pages 디렉토리는 클라이언트 라우팅 사용
• 새 app 디렉토리는 서버 중심 라투잉을 사용한다.
• 서버 중심 라우팅을 사용하면 클라이언트가 path map을 다운로드 할 필요가 없고 각 요청이 있을 경우 서버에서 처리함.
• 라우팅은 서버 중심이지만 SPA 동작과 유사하게 동작함. 즉 사용자가 한번 접속한 이후엔 변경되는 부분만 렌더링함.
• 서버 컴포넌트의 결과물을 클라이언트 캐시를 사용하여 성능 향상 가능.

부분 렌더링

형제 경로(예 /dashboard/settings: /dashboard/analytics이하) 사이를 탐색할 때 Next.js는 변경되는 경로의 레이아웃과 페이지만 가져오고 렌더링함.

고급 라우팅 패턴

• 병렬 경로 : 다른 경로를 가긴 2개 이상의 페이지를 한 페이지에 같이 표시할 수 있음. ex) 대시보드
• 경로 가로채기 : path를 가로채서 다른 path의 컨택스트에 표시할 수 있음. (뭔 말인지 모르겠는데 나중에…)
• 조건부 경로 : 조건부로 경로를 렌더링할 수 있음. ex) 사용자 로그인한 경우