Next.js 11-1 Routing Fundamentals

• Terminology

Tree	계층 구조를 시각화하기 위한 규칙이다. 예를 들어 부모 및 자식 컴포넌트가 있는 경우 컴포넌트 트리, 폴더 구조 등이 있다.
Subtree	새 루트(첫번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부이다.
Root	루트 레이아웃과 같은 트리 또는 트리의 첫 번째 노드이다.
Leaf	URL 경로의 마지막 세그먼트와 같이 자식이 없는 하위 트리의 노드이다.
URL Segment	슬래시로 구분된 URL 경로의 일부이다.
URL Path	도메인 뒤에 오는 URL의 일부(세그먼트로 구성)이다.

 

• 디렉토리 app

  버전 13에서 Next.js는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Server 컴포넌트에 구축된 새로운 앱 라우터를 도입했다.

  이 앱 라우터는 app이라는 새 디렉토리에서 작동한다. app 디렉토리는 점진적 채택을 허용하기 위해 pages 디렉토리와 함께 작동한다. 이를 통해 애플리케이션의 일부 경로를 새 동작으로 선택하고 다른 경로는 이전 동작을 위해 pages 디렉토리에 유지할 수 있다. 물론 앱 라우터가 페이지 라우터보다 우선순위가 높기 때문에 디렉토리 간 경로는 동일한 URL 경로로 확인되서는 안 되며 충돌을 방지하기 위해 빌드 시 오류가 발생하게 된다.

  기본적으로 app 디렉토리의 내부 컴포넌트는 React Server 컴포넌트이다. 이것은 성능 최적화와 쉬운 접근성을 위한 것이다. 물론 클라이언트 컴포넌트를 사용할 수도 있다.

 

• 폴더 및 파일의 역할

  앱 라우터에서 폴더는 경로를 정의하는 데 사용된다. 경로는 루트 폴더에서 page.js 파일이 포함된 최종 리프 폴더까지의 계층 구조를 따르는 중첩 폴더의 단일 경로이다. 파일은 경로 세그먼트에 대해 표시되는 UI를 만드는 데 사용된다.

 

• 경로 구간

  경로의 각 폴더는 경로 세그먼트를 나타낸다. 각 경로 세그먼트는 URL 경로의 해당 세그먼트에 매핑된다.

app -- (Root Segment)

    dashboard -- (Segment)

        settings (Leaf Segment)

(acme.com/dashboard/settings)

 

• 중첩 경로

  중첩된 경로를 만들려면 폴더를 서로 중첩하여 만들 수 있다. 예를 들어 app 디렉토리에 새 폴더를 중첩하여 새 /dashbaord/settings 경로를 추가할 수 있다.

  경로 /dashboard/settings는 세 부분으로 구성된다. '/' (루트 세그먼트), dashbaord (세그먼트), setting (리프 세그먼트)

 

• 파일 규칙

  Next.js 중첩된 경로에서 특정 동작으로 UI를 생성하기 위한 특수 파일 집합을 제공한다.

page.js	경로의 고유한 UI를 만들고 경로에 공개적으로 액세스할 수 있도록 한다.
route.js	경로에 대한 서버 측 API 엔드포인트를 만든다.
layout.js	세그먼트 및 해당 하위에 대한 공유 UI를 생성한다. 레이아웃은 페이지 또는 하위 세그먼트를 래핑한다.
template.js	새 컴포넌트 인스턴스가 탐색에 마운트된다는 점을 제외하면 layout.js와 유사하다. 이 동작이 필요하지 않으면 레이아웃을 사용하면 된다.
loading.js	세그먼트 및 해당 하위에 대한 로딩 UI를 생성한다. loading.js는 React Suspense Boundary에서 페이지 또는 하위 세그먼트를 래핑한다. 로드하는 동안 로드 UI를 표시할 것이다.
error.js	세그먼트 및 하위 항목에 대한 오류 UI를 만든다. error.js는 React Error Boundary에서 페이지 또는 하위 세그먼트를 래핑한다. 오류가 발견되면 오류 UI를 표시할 것이다.
global-error.js	error.js와 비슷하지만 특히 루트 layout.js에서 오류를 잡는 데 사용된다.
not-found.js	notFound 함수가 경로 세그먼트 내에서 발생하거나 URL이 어떤 경로와도 일치하지 않을 때 표시하는 UI를 만든다.

이 규칙들은 .js 뿐만아니라 .jsx나 .tsx에서도 사용가능하다.

 

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

  클라이언트 측 라우팅을 사용하는 pages 디렉토리와 달리 앱 라우터는 서버 중심 라우팅을 사용하여 서버 컴포넌트 및 서버의 데이터 fetch에 맞춘다. 서버 중심 라우팅을 사용하면 클라이언트는 경로 맵을 다운로드할 필요가 없으며 서버 컴포넌트에 대한 동일한 요청을 사용하여 경로를 조회할 수 있다. 이 최적화는 모든 애플리케이션에 유용하지만 경로가 많은 애플리케이션에 더 큰 영향을 미친다.

  라우팅은 서버 중심이지만 라우터는 단일 페이지 응용 프로그램의 동작과 유사한 링크 컴포넌트와 함께 클라이언트 측 탐색을 사용한다. 즉, 사용자가 새 경로로 이동할 때 브라우저가 페이지를 다시 로드하지 않는다. 대신 URL이 업데이트되고 Next.js는 변경된 세그먼트만 렌더링 한다.

  또한 사용자가 앱을 탐색할 때 라우터는 React Server 컴포넌트 페이로드의 결과를 메모리 내 클라이언트 측 캐시에 저장한다. 캐시는 모든 수준에서 무효화를 허용하고 React의 동시 렌더링에서 일관성을 보장하는 경로 세그먼트로 분할된다. 이는 특정한 경우에 이전에 가져온 세그먼트의 캐시를 재사용하여 성능을 더욱 향상할 수 있음을 의미한다.

 

• 부분 렌더링

  현재 경로(예: /dashboard/settings 와 /dashboard/analytics) 사이를 탐색할 때 Next.js는 변경되는 경로의 레이아웃과 페이지만 가져오고 렌더링 한다. 하위 트리의 세그먼트 위에 있는 항목을 다시 가져오거나 다시 렌더링 하지 않는다. 이는 레이아웃을 공유하는 경로에서 사용자 형제 페이지 사이를 탐색할 때 레이아웃이 유지됨을 의미한다.

  부분 렌더링이 없으면 탐색할 때마다 전체 페이지가 서버에서 다시 렌더링 된다. 업데이트 중인 세그먼트만 렌더링 하면 전송되는 데이터의 양과 실행 시간이 줄어들어 성능이 향상된다.

 

• 고급 라우팅 패턴

  앱 라우터는 또한 고급 라우팅 패턴을 구현하는 데 도움이 되는 집합 규칙을 제공한다.

병렬 경로	독립적으로 탐색할 수 있는 동일한 보기에서 두 개 이상의 페이지를 동시에 표시할 수 있다. 자체 하위 탐색이 있는 분할 보기에 사용할 수 있다. 예: 대시보드.
경로 가로채기	경로를 가로채서 다른 경로의 컨텍스트에 표시할 수 있다. 현재 페이지의 컨텍스트를 유지하는 것이 중요할 때 사용할 수 있다. 예: 하나의 작업을 편집하거나 피드에서 사진을 확장하는 동안 모든 작업을 본다.