모든 애플리케이션의 골격은 라우팅입니다. 이 페이지에서는 웹 라우팅의 기본 개념과 Next.js에서 라우팅을 처리하는 방법을 소개합니다.

용어

먼저, 문서 전체에서 이러한 용어가 사용되는 것을 볼 수 있습니다. 다음은 간단한 참조입니다.

• Tree: 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트가 있는 컴포넌트 트리, 폴더 구조 등이 있습니다.
• Subtree: 트리의 일부로, 새 루트(첫 번째)에서 시작하여 리프(마지막)에서 끝나는 트리의 일부입니다.
• Root: 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번째 노드입니다.
• Leaf: 하위 트리의 노드 중 자식이 없는 노드(예: URL 경로의 마지막 세그먼트) 입니다.

• URL 세그먼트: 슬래시로 구분된 URL 경로의 일부입니다.
• URL Path: 도메인 뒤에 오는 URL의 일부(세그먼트로 구성됨)입니다.

The app Router

버전 13에서는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 에러 핸들링 등을 지원하는 React 서버 컴포넌트에 기반한 새로운 앱 라우터가 도입되었습니다.

앱 라우터는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 pages 디렉토리와 함께 작동하여 점진적인 적용이 가능합니다. 따라서 애플리케이션의 일부 경로를 새 동작으로 선택하면서 다른 경로는 이전 동작을 위해 pages 디렉토리에 유지할 수 있습니다. 애플리케이션에서 pages 디렉토리를 사용하는 경우 페이지 라우터 문서도 참조하세요.

<aside> 💡 앱 라우터가 페이지 라우터보다 우선합니다. 디렉토리 간 경로는 동일한 URL 경로로 확인되어서는 안 되며 충돌을 방지하기 위해 빌드 타임 오류가 발생합니다.

</aside>