Next.js는 layout, nested routing, loading states, error handling 등등 많은 지원을 하는 리액트 서버 컴포넌트의 위에 빌트된 라우터를 기반으로 새로운 파일 시스템을 소개한다.
이 페이지는 새로운 라우팅 모델에 대한 기능적인 컨셉들을 소개할 것이다.
너는 문서를 통해서 이러한 용어들을 보게 될것이다.
Tree : 시각적인 계층 구조를 위한 협약, 예를 들어서 부모와 자식 컴포넌트를 가진 컴포넌트 트리, 폴더구조 등등
Subtree : Tree의 일부분으로서, 새로운 root을 시작하며 끝나는 부분이다.
Root : root layout 같이 tree나 subtree의 첫번째 노드이다.
Leaf : URL path 안에 있는 마지막 segment 같이 자식이 없는 subtree안에 있는 노드들이다.
- App 경로
새로운 라우터는 app이라고 명명된 새로운 경로에서 작동한다. app 경로는 증분채택을 허락하기 위해 pages경로와 함께 작동한다.
이것은 너가 전에 동작들을 다룬 페이지 경로가 있는 다른 라우터들을 보관하는 동시에 새로운 동작이 있는 너의 어플리케이션의 몇몇 라우트들을 선택하도록 한다.
알아두면 좋을점 : 경로들을 갖고있는 라우트들은 같은 URL을 가질수 없다. 이것은 문제를 방지하기 위해 build-time error 가 발생할 것이다.
기본적으로, app 안에 있는 컴포넌트들은 리액트 서버 컴포넌트들이다. 이것은 성능최적화와 그들을 쉽게 적용하도록 허락한다. 그러나, 클라이언트 컴포넌트들 또한 사용할 수 있다.
- App 안에 있는 폴더와 파일들
앱 경로에서는 :
- 폴더들은 라우트들을 정의하기 위해 사용되어진다. 라우트는 root 폴더에서 마지막 leaf 폴더로 내려가는 계층을 가진 중첩폴더의 단일 경로이다.
- 파일들은 라우트 segment 가 보여지기 위한 UI를 만들기 위해 사용되어진다.
라우트 안에 있는 각각 폴더들은 라우트 segment를 나타낸다. 각각 라우트 segment는 URL 경로 안에 있는 일치하는 segment와 각각 맵핑된다.
- 중첩 라우팅
중첩 라우팅을 만들기 위해서는, 서로 안에 있는 폴더들을 엮어줄 수있다. 예를 들어서 너는 app 경로에 있는 두개의 새로운 폴더들을 엮어줌으로써 /dashboard/settings 라우트를 새로 추가할 수 있다.
- Special Files
Next.js 는 너가 너의 라우트들 안에서 사용할 수 있는 특별한 파일들의 set을 제공한다.
- page.js : 라우트의 유니크한 UI를 정의하기 위해 사용되는 파일, 그리고 공개적으로 접근 가능한 경로를 만든다.
- layout.js : 여러 페이지들에서 사용하고 공유되는 UI를 정의하기 위한 파일이다. layout은 페이지나 다른 레이아웃을 자식으로서 허용한다. 너는 중첩 라우팅을 만들기 위해 레이아웃들을 엮을 수 있다.
- loading.js : app의 특정한 부분을 위한 loading UI를 만들기 위해 사용되는 선택적 파일이다. 이것은 자동으로 자식 라우트들 사이에서 이동될때나, 처음 로딩될때 즉시 로딩 컴포넌트들을 보여주며 React Suspense Boundary안에 있는 자식 레이아웃이나 페이지를 감싼다.
- error.js : app 의 특정한 경로에 대해 에러를 분리시키기 위한 선택적 파일이다. 에러정보를 보여주고, 에러로부터 복구하기 위한 시도를 하는 기능을 보여준다. 이것은 자동으로 React Error Boundary 안에 있는 자식 레이아웃이나 페이지를 감싼다. subtree에서 에러가 발생할때마다 너의 에러 컴포넌트를 보여준다.
- template.js : 레이아웃과 비슷하지만, navigation 시에 컴포넌트의 새로운 인스턴스가 마운트 되고 state들은 공유되지 않는다. 너는 enter 나 exit 애니메이션시에 이런 template들을 사용할 수 있다.
- head.js : head태그를 위한 콘텐츠들을 정의하기 위한 선택적 파일이다.
- not-found.js : 라우트 segment와 함께 notFound 함수가 던져졌을때 보여줄 UI를 렌더할 선택적 파일이다
알아두면 좋은점 : .js, .jsx, .ts 파일 익스텐션들은 특별한 파일들을 위해 사용 될 수 있다. JSX를 포함하는 ts 파일들은 타입에러를 유발할 것이다.
- 함께 위치시키기 (Colocation)
정확한 의미가 떠오르지 않아 문맥상 이렇게 해석한다.
특별한 파일들을 더해서, 너는 너의 폴더 안에 너만의 파일들을 함께 위치시킬수 있는 옵션이 있다. 예를 들어서 stylesheets나 tests나 components나 기타 등등
- 클라이언트 Navigation과 서버 중심 라우팅
클라이언트 사이드 라우팅을 사용하는 페이지 경로와는 다르게, 앱경로에 있는 새로운 라우터는 서버에 데이터페칭과 서버컴포넌트들과 함께하는 서버중심 라우팅을 사용한다. 서버 중심 라우팅에서는 클라이언트는 라우트 맵을 다운받을 필요가 없으며, 서버컴포넌트들을 위한 같은 요청은 라우트들을 찾기 위해 사용되어 질수 있다. 이 최적화는 모든 어플리케이션에 유용하며, 많은 라우트들과 함께 어플리케이션에 더 강한 영향을 끼친다.
라우팅은 서버중심임에도 불구하고, 라우터는 SPA 동작과 닮은 Link 컴포넌트와 함께 클라이언트쪽 navigation을 사용한다. 대신에, Next.js 는 오직 바뀐 segements만 렌더하고 URL은 업데이트 된다.
게다가, 앱을 이용하는 사용자들에게, 라우터는 클라이언트쪽 캐시쪽에 리액트 서버 컴포넌트의 결과물을 저장한다.이 캐시는 어느 수준에서도 무효화를 허용하고, 동시 렌더링된것들에서도 일관성을 보장하는 라우트 segments에 의해 분리된다. 이 의미는, 특정한 경우에서 전에 fetch 된 segment의 캐시는 향상된 퍼포먼스를 가지면서도 재사용 될수 있다는 것이다.
- 부분 렌더링
/dashboard/settings 에서 /dashboard/analytics 로 이동하는거 같이 자식 라우트들 사이트들 사이에서 페이지가 이동될때, Next.js에서는 바뀐 라우트들 안에 있는 페이지들과 layouts들만 fetch 하고 렌더한다. 이것은 subtree안에 있는 segmetns들 위에 어떠한것도 re-fetch나 re-render를 하지 않는다. 이것은 레이아웃을 공유하는 라우트들 안에서, 레이아웃은 유저가 자식페이지들끼리 페이지를 이동할때 보존되는 것을 의미한다. 부분렌더링이 없으면, 각각 페이지 이동은 서버에서 모든 페이지 리렌더를 유발한다. 업데이트된 segment 만 렌더링하는것은 실행시간과 이동된 데이터의 양을 줄여주고, 더 나은 성능 향상을 이끈다.
미래에, Next.js 라우터는 너의 더 나은 라우팅 패턴을 돕기위해서 많은 약속들의 집합을 제공할 것이다.
- 병렬 라우팅 : 너가 동시에 2개 이상의 페이지를 같은 view안에서 보여주며 그것들은 독립적으로 navigate가 될것이다. 너는 dashboard 같이 그들의 sub-navigation을 가지고 있는 분리된 views들로 사용할수있다.
- 라우트 인터셉팅 : 너가 라우트를 가로채고, 그걸 다른 라우트의 context 안에서 보여주는걸 가능하게 한다. 너는 사진피드를 확장하거나, 한개의 업무를 보면서 모든 업무들을 봐야하는 것 같은, 현재 페이지가 중요한 상황에서 이런걸 가능하게 할 수 있다.
- 조건 라우팅 : 너가 로그인해야지만 페이지를 보여주는 것 같이 상황에 따른 라우트를 렌더할수 있도록 한다.
이러한 패턴들과 약속들은 너의 Next.js어플리케이션 안에서 더욱 복잡하고 부유하게 build할수 있도록 할 것이다.
