[Next.js] Routing

Routing(라우팅)

먼저, 라우팅을 이야기할 때 주로 사용되는 용어를 살펴보겠다.

Tree(트리)	계층적 자료 구조. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 구조, 폴더 구조 등이 있음
Subtree(하위 트리)	새로운 기준의 계층에서 시작해 마지막에서 끝나는 트리의 일부
Root(루트)	트리 또는 하위 트리의 첫 번째 노드
Leaf(리프)	세그먼트의 노드 중 자식이 없는 노드(예를 들어, URL 경로의 마지막 세그먼트)

URL Segment, URL Path

세그먼트는 슬래시로 구분된 URL 경로의 일부이며, URL Path는 도메인 뒤에 오는 URL의 일부(세그먼트로 구성)이다.

App Router(앱 라우터)

Next.js 13버전에서는 공용 스타일을 관리하는 레이아웃 파일, 중첩 라우팅, 로딩 상태 제공, 에러 핸들링 등을 지원하며 React Server Components(리액트 서버 컴포넌트)를 기반으로 하는 새로운 앱 라우터가 도입되었다.

앱 라우터는 app이라는 새로운 디렉토리에서 작동한다. app 디렉토리는 페이지 디렉토리와 함께 사용이 가능하며, 기존 페이지 라우터 형식에도 점진적인 적용이 가능하다.

알아두면 좋은 팁

앱 라우터가 페이지 라우터보다 우선 적용되며, 이 두 방식의 라우터는 동일한 URL 경로를 사용해서는 안 된다.

기본적으로 앱 내부의 컴포넌트는 리액트 서버 컴포넌트이며, 이는 성능 최적화의 이유와 클라이언트 컴포넌트도 사용할 수 있다는 이점이 있다.

폴더와 파일의 역할

Next.js의 폴더는 라우트를 정의하는 데 사용된다. 라우트는 중첩된 폴더의 단일 경로로, 파일 시스템 계층 구조를 따라 root 폴더에서 page.ts 파일이 포함된 최종 leaf 폴더로 내려간다.

Route 구간

경로의 각 폴더는 라우트를 나타내며, 각각 URL 경로의 해당 라우트에 매핑된다.

중첩 Route

폴더를 서로 중첩하면 중첩 라우팅이 이루어진다. 예를 들어, app 디렉토리에 두 개의 새 폴더를 중첩 생성할 수 있다. 아래에서 dashboard는 세그먼트이며, settings는 리프 세그먼트이다.

/dashboard/settings

파일 컨벤션

Next.js는 중첩된 라우트에서 특정 동작을 하는 UI를 만들기 위한 특수 파일들을 제공한다.

layout	공통 레이아웃을 관리하는 파일
page	라우트 자체의 고유 UI 생성 및 퍼블릭 라우트 설정
loading	라우트에 대한 로딩 UI 설정 (React Suspence Boundary)
not-found	라우트를 찾을 수 없을 때 사용 (React Error Boundary)
error	라우트에 대한 에러 UI (React Error Boundary)
global-error	전역 에러 UI
route	서버측 API 엔드포인트
template	layout 파일과 비슷하지만 새롭게 마운트 (상태 보존 X)
default	Parallel Routes(병렬 라우트)용 fallback UI

컴포넌트 계층

각 라우트들은 위 특수 파일에 정의된 React 컴포넌트 계층 구조로 렌더링된다.

아래 이미지와 같이 중첩 라우트의 컴포넌트는 상위 컴포넌트에 중첩된다.

Colocation

특수 파일 외에도 컴포넌트, 스타일, 테스트 등 고유한 파일을 app 디렉토리의 폴더 안에 배치할 수 있다. 폴더가 라우트를 정의하는 반면, page.ts나 route.ts가 반환하는 콘텐츠만 주소를 지정할 수 있기 때문이다.

쉽게 말해서, 각각의 폴더에 page.ts, route.ts 이외의 다른 파일들은 라우트로 취급되지 않는다.

고급 라우팅 패턴

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

Parallel Routes(병렬 라우트)

독립적인 두 개 이상의 페이지를 동시에 표시할 수 있다. 예를 들어, 대시보드와 같이 여러 항목으로 분할된 곳에 사용될 수 있다.

Intercepting Routes(라우트 가로채기)

라우트를 가로채서 다른 라우트의 컨텍스트에 표시할 수 있다. 예를 들어, 페이지 레이아웃을 유지하면서 모달처럼 추가적으로 보여져야 하는 상황에 사용될 수 있다.

고급 패턴을 사용하면 더 풍부하고 복잡한 UI를 구축할 수 있으므로, 소규모 팀이나 개별 개발자가 구현하기에는 복잡했던 기능을 좀 더 쉽게 처리할 수 있다.