Routing Fundamentals
모든 응용 프로그램의 뼈대는 라우팅입니다. 이 페이지에서는 웹의 라우팅의 기본 개념 및 Next.js에서 라우팅을 처리하는 방법에 대해 소개합니다.
먼저, 이 용어들이 문서 전반에 사용되는 것을 볼 것입니다. 여기에 간단한 참고 자료가 있습니다:
트리(Tree): 계층 구조를 시각화하는 데 사용되는 규칙. 예를 들어, 부모 및 자식 구성 요소가 있는 구성 요소 트리, 폴더 구조 등이 있습니다.
서브트리(Subtree): 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부.
루트(Root): 트리 또는 서브트리의 첫 번째 노드, 예를 들어 루트 레이아웃.
잎(Leaf): 자식이 없는 서브트리의 노드, 예를 들어 URL 경로의 마지막 세그먼트와 같은 것.
URL 세그먼트(URL Segment): 슬래시로 구분된 URL 경로의 일부.
URL 경로(URL Path): 도메인 이후에 오는 URL의 일부 (세그먼트로 구성됨).
버전 13에서 Next.js는 React Server Components를 기반으로 한 새로운 App Router를 소개했습니다. 이 Router는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원합니다.
App Router는 app이라는 새 디렉토리에서 작동합니다. app 디렉토리는 페이지 디렉토리와 함께 작동하여 점진적으로 채택할 수 있도록 합니다. 이를 통해 애플리케이션의 일부 루트를 새로운 동작에 채택하면서 다른 루트를 이전 동작을 유지하기 위해 페이지 디렉토리에 유지할 수 있습니다. 애플리케이션이 페이지 디렉토리를 사용하는 경우 Pages Router 문서도 참고하세요.
알아두면 좋은 사항: App Router는 Pages Router보다 우선합니다. 디렉토리 간의 루트는 동일한 URL 경로로 해결되지 않아야 하며 충돌을 방지하기 위해 빌드 시간 오류가 발생합니다.
