반응형
7. Route Groups
- Next.js 에서 폴더는 일반적으로 URL Path에 맵핑된다.
- Route Group을 사용하면 Route segment와 구조에 영향을 주지 않고 논리적인 그룹을 구성하여 URL Path 맵핑을 의도적으로 방지할 수 있다.
- () 괄호로 묶어 Route Group을 구성할 수 있다.
7-1. URL Path에 영향이 없이 route를 구성할 수 있다.
- URL에 영향 없이 관련 route를 구성할 수 있다.
- 같은 경로 구조를 공유하더라도, 각 그룹마다 다른 레이아웃 적용이 가능하다.
7-2. 특정 세그먼트에 레이아웃 적용
- URL 정보를 유지하면서 특정 세그먼트에게만 layout을 적용하고 싶을 때, Route Group을 활용하면 된다.
7-3. 멀티 Root Layout 구성.
- URL 정보에 영향을 주지않고 여러 개의 Root Layout 구성이 가능하다. 단, 각 레이아웃은 <html><body> 태그를 가지고 있어야 한다.
1. route group 명칭은 각자 규칙에 맞게 아무거나 설정해도 된다. URL에 영향이 없다.
2. 각 세그먼트의 route 명칭은 중복되면 안된다. ex) (marketing)/about/page.js, (shop)/about/page.js -> 에러 발생.
3. 최상위 layout.js 없이 멀티 root layout 구성 시, route group 중 홈 page.js 정의가 되어야 한다. ex) (markgeting)/page.js
4. 멀티 root layout 구성 시, 각 레이아웃 간 navigation이 발생하면 전체 페이지가 다시 불러와 진다.
처음 뵙겠습니다.
Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.
Preference
Routing: Route Groups | Next.js
Route Groups can be used to partition your Next.js application into different sections.
nextjs.org