용어
먼저 이 문서를 읽는 동안 다음과 같은 용어들을 보게 될 것이다. 빠른 레퍼런스가 아래에 있다.
- 트리(tree) : 계층적인 구조를 시각화할 때 사용하는 약속이다. 예를 들면, 부모요소와 자식요소, 폴더구조로 된 구성요소 트리가 있다.
- subtree : 트리의 일부분으로, 새로운 루트에서 시작하여 마지막 leaves로 끝난다.
- root : 트리나 subtree의 첫번째 node이다.
- leaf : 자식 노드가 없는 subtree의 노드들이다. url 경로에서 last segment와 같다. (자식노드 없는 가장 말단의 노드들)
- url segment : 슬래시에 의해 구분된 url 경로의 일부분이다.(더 작은 단위)
- url path : 도메인 뒤에 오는 segment로 구성된 부분이다. (도메인 뒤 모든 부분을 합쳐 url path)라고 한다.
The app Router
버전 13에서, next js는 리액트 서버 컴포넌트에 만들어진 새로운 App Router를 소개한다. 이는 레이아웃 공유, 중첩된 라우팅, 로딩 상태, 에러 핸들링 등등을 지원한다.
App Router는 새로운 디렉토리인 app 디렉토리에서 작동한다. app 디렉토리는 pages 디렉토리와 함께 작용해 점직적 채택(전에꺼에서 새로운 것으로의 점진적 이전)을 허용한다. 이는 당신이 어플리케이션이 pages디렉토리에 있는 다른 경로를 유지하면서 일부 경로를 새로운 동작으로 선택할 수 있게 한다. 만약 어플리케이션이 pages 디렉토리를 쓴다면, pages Router 문서도 읽어보라.
good to know : App Router는 Pages Router보다 우선순위를 차지한다. 디렉토리 간 경로는 동일한 URL경로여서는 안되며, 그렇게 되면 충돌을 막기 위해 build-time 에러를 발생시킬 것이다.
기본값으로, app안의 컴포넌트들은 리액트 서버 컴포넌트이다. 이는 성능 최적화이며 당신이 그들을 쉽게 채택할 수 있도록 하고, Client Componenet 또한 사용할 수 있다.
추천 : Server Component를 사용해본 적이 없다면 Server page를 확인해라.
Roles of Folders and Files
Next.js는 파일 시스템을 기반으로 한 라우터를 사용한다.
- Folders는 경로를 정하기 위해 사용된다. 경로는 중첩된 폴더의 single path이며, 이는 파일 시스템의 계층을 따라 root folder 부터 page.js를 포함하는 마지막 leaf folder까지 내려간다.
- Files는 route segment에서 보이는 것처럼 UI를 만들기 위해 사용된다.
Route Segment
경로 내에 있는 각 폴더들가 route segment를 나타낸다. 각 route segment는 url path에 있는 일치하는 segment에 매핑된다.
-> 결국 폴더 이름이 url path가 된다.
nested Routes
중첩경로를 만들기 위해, 폴더 안에 폴더를 넣을 수 있다. 예를 들면, 새로운 /dashboard/settings 경로를 app 디렉토리 안에 넣을 수 있다.
/dashboard/settings 경로는 세 가지 segment로 구성되어 있다.
- /(root segment)
- dashboard(segment)
- settings(leaf segment)
file conventions
Next js는 중첩된 경로에서 특정 동작으로 UI를 만들기 위해 특별한 파일 집합을 제공한다.
layout : segment와 하위 요소들이 공유하는 UI
page : 그 경로의 unique한 UI, 그리고 경로가 공적으로 접근가능하게 한다.
loading : segment와 하위 요소들을 위한 Loading UI
not-found : segment와 하위 요소들을 위한 not-found UI
error : segment와 하위 요소들을 위한 에러 UI
global-error : global error ui
route : server-side api 끝나는지점(endpoint)
template : 특별히 리렌더링된 레이아웃 ui
default : parallel route를 위한 fallback ui
component heirarchy
route segment의 특별한 파일에 정의된 리액트 컴포넌트들은 특정 계층 구조로 렌더링된다.
layout.js(root)
template.js
error.js (React error boundary)
loading.js (React suspense boundary)
not-found.js (React error boundary)
page.js or nested layout.js(가장 하위)
중첩된 경로에서, segment의 구성요소들은 parent segment의 구성요소 안에 중첩된다. == 그 상위 폴더의 구성요소 내에 중첩된다
colocation(??)
특별한 파일에 더해, 당신은 당신의 파일들(components, styles, test, etc)을 app 디렉토리 안의 폴더에 같은장소에 둘(colocate) 수 있는 옵션이 있다.
이는 폴더들이 경로를 정의하는 동안에, page.js 또는 route.js로부터 반환되는 컨텐츠들만 공개적으로 주소를 지정할 수 있기 때문이다.
더 많은 내용을 보고 싶다면 참고 : 여기
발전된 라우팅 패턴
App Router는 또한 convention 집합을 제공하여 당신이 발전된 라우팅 패턴을 실행할 수 있도록 돕는다. 다음과 같은 것들이 있다 :
-
Parallel Routes : 독립적으로 탐색할 수 있는 같은 뷰에 동시에 두개 또는 이상의 페이지들이 보이도록 한다. 자체 하위 탐색을 가진 split view로 쓸 수 있다. (예. 대시보드)
-
경로 인터셉트 : 라우트를 가로채서 다른 라우트의 context안에서 보여준다. 현재 페이지의 context를 유지하는 것이 중요할 때 이를 사용할 수 있다. 예를 들면하나의 테스크를 편집하는 동안 모든 태스크를 보거나 피드에서 사진을 확장할 때 사용한다.
이러한 패턴은 더 풍부하고 복잡한 UI를 만들 수 있게 하고, 소규모 팀과 개별 개발자가 구현하기 어려웠던 기능을 모두가 개발할 수 있게 한다.
