앱 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route Group으로 표시하여 폴더가 라우트의 URL 경로에 포함되지 않도록 할 수 있습니다.
이렇게 하면 URL 경로 구조에 영향을 주지 않고 Route Segment와 프로젝트 파일을 논리적 그룹으로 구성할 수 있습니다.
Route Groups은 다음과 같은 경우에 유용합니다.
-
site section, intent, team 별로 경로를 그룹으로 구성할 때
-
동일한 Route Segment 수준에서 중첩 레이아웃 사용
- 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 개의 중첩된 레이아웃 만들기
- 공통 세그먼트의 경로 하위 집합에 레이아웃 추가하기
Convention
폴더 이름을 괄호로 묶어 Route Group을 만들 수 있습니다.
Examples
URl 경로에 영향을 주지 않고 경로 구성하기
URL에 영향을 주지 않고 경로를 정리하려면 그룹을 만들어 관련 경로를 함께 보관하세요. 괄호 안의 폴더는 URL에서 생략됩니다.
(markating) 및 (shop) 내부 라우트가 동일한 URL 계층 구조를 공유하더라도, 해당 폴더에 layout.js 파일을 추가하여 각 그룹에 대해 서로 다른 레이아웃을 만들 수 있습니다.
특정 세그먼트를 레이아웃으로 옵트인
특정 라우트를 레이아웃으로 옵트인하려면 새 Route Group을 생성하고 동일한 레이아웃을 공유하는 경로를 그룹으로 이동합니다. 그룹 외부의 경로는 레이아웃을 공유하지 않습니다.
여러 루트 레이아웃 만들기
여러 루트 레이아웃을 만들려면 최상위 layout.js 파일을 제거하고 Route Group 내에 layout.js 파일을 추가합니다. 이는 애플리케이션을 완전히 다른 UI 또는 경험을 가진 섹션으로 분할하는 데 유용합니다. 각 루트 레이아웃에 <html> 및 <body> 태그를 추가해야 합니다.
Good to Know
-
Route Group의 이름은 정리를 위한 것 외에는 특별한 의미는 없습니다. 경로 그룹은 URL에 영향을 주지 않습니다.
-
Route Group을 포함하는 경로는 다른 경로와 동일한 URL 경로로 Resolve해서는 안됩니다. 예를 들어 Route Group은 URL 구조에 영향을 주지 않으므로
(marketing)/about/page.js및(shop)/about/page.js모두/about로 Resolve되어 오류가 발생할 수 있습니다. -
최상위
layout.js파일 없이 여러 루트 레이아웃을 사용하는 경우, 홈page.js파일은 Route Group 중 하나에 정의되어야 합니다. -
여러 루트 레이아웃을 탐색하면 클라이언트 탐색과 달리 전체 페이지가 로도됩니다. 예를 들어
/cart에서app/(marketing)/layout.js를 사용하면/blog로 이도앟면 전체 페이지가 로드됩니다. 이는 여러 루트 레이아웃에만 적용됩니다.
