Route Groups
app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다. 그러나 폴더를 Route Group으로 표시해서 route의 URL 경로에 폴더가 포함되지 않도록 할 수 있다.
이것은 URL 경로 구조에 영향을 주지 않고 route segment와 프로젝트 파일을 논리 그룹으로 구성할 수 있다.
Route groups는 다음과 같은 상황에서 유용하다.
- route 그룹 구성(예를 들면 사이트 섹션별, 의도별, 혹은 팀별로)
- 동일한 route segment 레벨에서 중첩된 레이아웃 활성화 :
- 여러개의 루트 레이아웃을 포함하여 동일한 segment에서 여러 중첩된 레이아웃 만들기
- 공용 segment 경로의 하위 레이아웃 추가
Convention
Route group은 폴더 이름을 소괄호로 감싸서 만들 수 있다.
Examples
URL 경로에 영향을 주지않고 routes 구성하기
URL 경로에 영향을 주지않고 route를 구성하려면 관련이 있는 route들을 함께 보관할 그룹을 만든다. 괄호 안의 폴더는 URL에서 생략된다.( 예. (marketing) or (shop) )
(marketing)과 (shop) 의 route가 같은 URL 계층을 공유하더라도 폴더 내에 layout.js 파일을 추가하여 각 그룹에 대해 다른 레이아웃을 만들 수 있다.
특정한 segment를 레이아웃으로 선택하기
특정한 route를 레이아웃으로 선택하려면 새로운 route group을 만들고(ex. (shop) ) 동일한 레이아웃을 공유하는 route(ex. account and cart)를 그룹으로 이동시킨다. 그룹 외부의 route는 레이아웃을 공유하지 않는다.(ex. checkout)
다중 root 레이아웃 만들기
다중 root 레이아웃을 만들려면 최상위 layout.js 파일을 제거하고 각각의 route group에 layout.js 파일을 만든다. 이 기능은 애플리케이션을 완전히 다른 UI나 경험을 가진 섹션으로 분할할 때 유용하다. <html>태그와 <body>태그를 각각의 root 레이아웃에 추가해야 한다.
위의 예시에서 (marketing) 과 (shop)은 고유의 root 레이아웃을 가지고있다.
* 알아두면 좋은것
- route group의 이름 지정은 구성 이외의 특별한 의미는 없다. URL 경로에 영향을 주지 않는다.
- route group을 포함하는 route는 다른 route와 동일한 URL 경로를 사용하면 안된다. 예를 들어 route group이 URL 구조에 영향을 주지는 않지만 (marketing)/about/page.js 와 (shop)/about/page.js는 둘 다 /about을 사용하므로 오류가 발생한다.
- 최상위 layout.js 파일없이 다중 root 레이아웃을 사용하는 경우 home의 page.js파일은 route groups 중 하나에 정의해야 한다. ex) app/(marketing)/page.js
- 다중 root 레이아웃을 탐색하면 전체 페이지 로드가 발생한다.( 클라이언트측 탐색과 다르게) 예를 들어 app/(shop)/layout.js를 사용하는 /cart 에서 app/(marketing)/layout.js를 사용하는 /blog로 이동하면 전체 페이지가 로드된다. 이것은 다중 root 레이아웃에만 적용된다.
Reference
- https://nextjs.org/docs/app/building-your-application/routing/route-groups
Routing: Route Groups | Next.js
Using App Router Features available in /app
nextjs.org
'개인공부' 카테고리의 다른 글
| Next.js Docs (7) Loading UI and Streaming (0) | 2023.06.24 |
|---|---|
| Next.js Docs (6) Dynamic Routes (0) | 2023.06.20 |
| Next.js Docs (4) Linking and Navigating (0) | 2023.06.13 |
| Next.js Docs (3) Defining Routes, Pages and Layouts (0) | 2023.06.10 |
| Next.js Docs (2) Routing Fundamentals (0) | 2023.06.07 |
댓글