[Next.js] Routing Fundamentals

Web

Jintiago 2023. 10. 24. 14:21

Building Your Application: Routing | Next.js

nextjs.org

위 페이지를 번역 및 정리한 것입니다.

- Tree: 계층적 구조를 시각화한 것.

- Subtree: 트리의 일부

- Root: 트리나 서브트리의 첫번째 노드

- Leaf: 자식 노드가 없는 노드(ex: URL 경로의 마지막 세그먼트)

- URL Segment: 슬래시로 구분되는 URL 경로의 일부

- URL Path: 도메인 영역 다음으로 오는 URL의 일부

버전 13에서 Next.js는 React Server Components를 기반으로 한 새로운 App Router(이하 앱 라우터)를 소개했는데, 이는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 에러 핸들링 등을 지원한다.

앱 라우터는 app 디렉토리에서 동작한다. 앱 라우터의 점진적 적용을 위해, app 디렉토리는 pages 디렉토리와 함께 동작한다. 이때, 앱 라우터는 Pages Router보다 높은 우선순위를 가진다.

기본적으로, app 디렉토리 내부의 컴포넌트들은 React Server Component들이다. 이는 퍼포먼스를 최적화하며 쉽게 앱 라우터를 적용할 수 있게 한다. 또한, Client Components도 사용할 수 있다.

Next.js는 파일 시스템을 기반으로 한 라우터를 사용한다.

- 폴더는 라우트를 정의한다. 라우트는 중첩된 폴더들 중의 단일한 경로로서, root folder로부터 page.js를 포함하는 leaf folder 에 이르는파일 시스템 계층을 따른다.

- 파일은 라우트 세그먼트의 UI를 생성하는데 사용된다.

route segment는 라우트의 각 폴더이다. 각 라우트 세그먼트는 URL path의 각 세그먼트에 대응한다.

중첩 라우트는 폴더들을 중첩시킴으로서 생성할 수 있다. 예를 들어, /dashboard/settings 라우트를 생성하려면 이들을 app 디렉토리에 중첩하여 생성하면 된다.

이는 세 개의 세그먼트로 구성된다.

Next.js는 특정한 동작을 하는 UI를 생성하기 위한 파일셋을 제공한다.

layout	세그먼트와 그 자식을 위한 공유 UI
page	라우트에 대한 유니크 UI, public하게 접근할 수 있음
loading	세그먼트와 그 자식을 위한 로딩 UI
not-found	세그먼트와 그 자식을 위한 not found UI
error	세그먼트와 그 자식을 위한 에러 UI
global-error	글로벌 에러 UI
route	서버사이드 API 엔드포인트
template	specialized 재랜더링 레이아웃 UI
default	병렬 라우트를 위한 Fallback UI

라우트 세그먼트의 스페셜 파일들에 정의된 리액트 컴포넌트들은은 다음과 같은 계층 구조로 렌더링된다.

중첩된 라우트에서 어떤 세그먼트의 컴포넌트들은 부모 세그먼트의 컴포넌트들의 안쪽으로 중첩된다.

스페셜 파일들에 더해, 사용자 정의 파일(ex: components, styles, tests, etc)을 app 디렉토리 내부의 폴더 안에 colocation할 수도 있다.

이는 폴더가 라우트를 정의할 때, page.js나 route.js에 의해 리턴되는 콘텐츠만 공개적으로 접근 가능하기 때문이다.

앱 라우터는 고급 라우팅 패턴을 구현하기 위한 컨벤션 셋을 제공한다.

- Parallel Routes(병렬 라우팅): 동시에 두 개 이상의 페이지를 같은 뷰에서 독립적으로 탐색할 수 있게 보여준다. 각각 자체 하위 네비게이션이 있는 분할 뷰에 사용할 수 있다(ex: 대시보드).

- Intercepting Routes: 라우트를 가로채서 다른 라우트의 컨텍스트 안에 보여줄 수 있다. 현 페이지의 컨텍스트를 유지하는 것이 중요할 때 이를 사용할 수 있다.