Nested routing
nextjs에서는 신기한 routong을 사용하는데, 바로 파일구조를 이용해 라우팅을 한다는 것이다.
위의 이미지처럼 app 밑의 폴더의 이름이 url path가 되는 방식이다. 해당 경로로 접근했을 때 나오는 페이지는 각각의 폴더 하위에 생성한 page.tsx(js, ts ...)이 나오게 된다.
이 부분의 설명중 Colocation이라는 단어가 나오는데, 내가 이해하기로는 파일구조를 사용해 특정 경로에 공통으로 사용되는 component나 layout등을 관리하기 쉽게 사용한다는 것 같다.
어떻게 사용하는지는 알겠는데, 말로 설명하자니 참 애매하다...
Layout
url path로 지정한 폴더 아래의 layout이라는 파일을 만들어 그 urlpath 하위에 있는 page 파일에 공통적으로 적용할 수 있다.
예를 들면 dashboard 밑의 layout이라는 파일을 만들면, dashboard 아래의 생성한 여러 url path들에 해당 layout이 적용되는 방식이다.
이 layout을 사용하면 좋은 점중에 하나는 nextjs가 partial rendering이라는 기능을 가지고 있기 때문이다.
한국어로 하면 부분적 렌더링인데, 이름에서부터 예상할 수 있는것처럼, 공통의 layout에 해당하는 부분은 다시 렌더링하지 않는다는 것이다.
다시 렌더링하지 않는 부분이 생긴다는 것은 페이지 이동 시의 비용이 줄어든다고 볼 수 있다.
Root Layout
Root Layout은 우리의 웹페이지 전체에 적용되는 layout을 말한다.
여기서는 전체적으로 적용될 UI를 선언하거나, html, body 태그들을 수정하거나, metadata들을 추가할 때 사용한다.
next 13때 공부를 안해서 잘 모르겠지만, next14는 굉장히 많이 바뀐 것 같은데, 실제 회사에서 버전을 업그레이드 할 때 많이 고생했을 것 같다.
이 챕터는 사실 크게 어려운 내용이 없어서 쭉 읽어보면 편하게 이해할 수 있을 것 같다.
참고자료
https://nextjs.org/learn/dashboard-app/creating-layouts-and-pages
