모든 애플리케이션의 뼈대는 라우팅이다. 이 페이지에서 웹의 라우팅의 기본 개념과 Next.js에서 routing을 다루는 방법을 소개해 줄 것이다.
Terminology 전문용어
문서에서 다루게 될 전문용어들이다.
Tree: 계층 구조를 시각화한 규약이다.(?) 예를들어 부모와 자식 컴포넌트 트리의 component, 폴더 구조 등등
Subtree: tree의 일부분. 새로운 root에서 시작(first)하여 leaves(last)로 끝난다.
Root: root layout과같은 Tree또는 Subtree의 첫번째 노드
Leaf: URL path의 마지막 segment와 같이 자식이 없는 subtree의 노드들.
URL Segment: 슬래시로 한정되는 URL path의 부분
URL Path: domain이후에 오는 URL의 일부분 (segments로 구성)
The app Router
Next.js는 version 13에서 React Server components에 빌드된 App Router를 새로이 소개하였다.
이것은 공유된 layout, 중첩 라우팅, 로딩 스테이트, 에러 핸들링 등 이상의 것을 지원한다.
앱라우터는 app으로 이름지어진 새로운 폴더에서 작동한다. 앱디렉토리는 pages 디렉토리와 함께 점진적인 채택을 가능하게 한다. 애플리케이션의 라우트들을 새로운 동작으로 채택하는 것을 허용한다. 이전 동작을 위한 페이지 디렉토리의 다른 라우트를 유지하는 동시에. 만약 애플리케이션이 페이지 디렉토리를 사용한다면 Pages Router 문서도 읽어 보라.
알아두면 좋은 것 : 앱라우터는 Pages Router보다 우선순위를 점한다. 폴더들 전체의 라우트들은 똑같은 URL path 사용을 할 수 없으며 충돌을 방지하기 위해 빌드 타임 에러를 일으킬 것이다.
기본적으로, app 안의 component들은 React Server Component들이다. 이것은 성능 최적화이며 쉽게 채택할 수 있게 하고, Client Components도 사용할 수 있다.
추천 : Server Components가 처음이라면 Server page를 체크아웃하여라.
Roles of Folders and Files
Next.js는 라우터가 어디에 있는지에 기반한 파일 시스템을 사용한다.
- Folders는 라우트를 정의하는데 사용된다. 라우트는 중첩된 폴더의 개별 path다. page.js파일을 포함하는 루트 폴더에서 마지막 리프폴더의 file-system 위계를 따라서다.
See Defining Routes.
- Files는 route segment에 의해 보여지는 UI를 작성하는데 사용된다.
See special files.
Route Segments
라우트의 각 폴더는 라우트 세그먼트를 보여준다. 각 라우트 세그먼트는 URL path에 맞는 세그먼트에 매핑된다.
Nested Routes
중첩 라우트를 생성하기 위해 우리는 각 내부의 폴더를 중첩할 수 있다. 예를들어 app 폴더 안에 두개의 새로운 폴더를 중첩 함으로써 /dashboard/settings 라우트를 추가할 수 있다.
/dashboard/settings 라우트는 세개의 세그먼트로 구성되어있다.
/ (루트 세그먼트)
dashboard (세그먼트)
settings (리프 세그먼트)
File Conventions
Next.js는 중첩 라우트에 특별한 동작을 하는 UI를 작성하기 위한 특별한 파일 셋을 제공한다
layout 세그먼트와 그 자식들에 공유되는 UI
page 라우트가 공공연하게 접근할 수 있도록 하는 특별한 UI라우트
loading 세그먼트와 그 자식들의 Loading UI
not-found 세그먼트와 그 자식들의 Not found UI
error 세그먼트와 그 자식들의 Error UI
global-error 전역 Error UI
route 서버사이드 api endpoint
template 특화된 리렌더링되는 Layout UI
default parallel Routes의 Fallback UI
Component 위계
라우트 세그먼트의 특별한 파일에 정의되어있는 리액트 컴포넌트는 특정 위계에 렌더링 된다. 중첩된 라우트에서 세그먼트의 컴포넌트는 부모 세그먼트의 내부에 중첩될 것이다.
Colocation 동일 장소 배치
특별한 파일에 더하여 앱 디렉토리에 당신의 파일(components, styles, tests, etc 와 같은)을 폴더내부에 위치시킬 수 있다.
이것은 폴더가 라우트를 정의하는 동안 오로지 page, route에 의해 배출된 컨텐츠가 공적으로 위치가능하다.
Advanced Routing Patterns
App Router는 보다 더 고급 기술인 routing pattern을 구현하는데 도움을 주기 위한 원칙들을 제공한다.
Parallel Routes : 동시에 두개 혹은 이상의 페이지를 동일한 뷰에서 독립적으로 네비게이트 될 수 있게 한다. 대시보드와 같은 서브 내비게이션같이 분할된 뷰를 위해 사용된다.
Intercepting Routes: 다른 라우트의 컨텍스트에서 라우트를 인터셉트해서 보여줄 수 있게 한다. 우리는 이러한 것을 현재 페이지가 중요해서 컨텍스트를 유지하여야 할 때 사용한다.즉 피드에서 포토를 크게 하거나 태스크를 수정할 때 모든 작업을 볼 수 있게 한다.