앱 폴더의 계층 구조는 URL 경로에 직접 매핑된다. 그러나 경로 그룹을 생성하여 이 패턴에서 벗어날 수 있다. 경로 그룹을 사용하여 다음을 수행할 수 있다. 이렇게 하면 URL 구조에 영향을 주지 않고 경로를 구성한다. 그리고 특정 경로 세그먼트를 레이아웃을 옵트인 한다. 애플리케이션을 분할하여 여러 루트 레이아웃을 만든다.
경로 그룹은 폴더 이름을 괄호로 감싸서 생성할 수 있다.(예: (folderName))
- Examples
URL 경로에 영향을 주지 않고 경로 구성
URL에 영향을 주지 않고 경로를 구성하려면 그룹을 만들어 관련 경로를 함께 유지한다. 괄호 안의 폴더는 URL에서 생략된다.(예: (marketing) 또는 (shop)).
app --
|
layout.js
(marketing) --
|
about -- (/about)
|
page.js
blog -- (/blog)
|
page.js
(shop) --
|
account -- (/account)
|
page.js(marketing) 및 (shop) 내부의 경로가 동일한 URL 계층 구조를 공유하더라도 폴더 내에 layout.js 파일을 추가하여 각 그룹에 대해 다른 레이아웃을 생성할 수 있다.
app --
|
layout.js
(marketing) --
|
layout.js
...
(shop) --
|
layout.js
...
특정 세그먼트를 레이아웃으로 선택
특정 경로를 레이아웃으로 선택하려면 새 경로 그룹(예: (shop))을 만들고 동일한 레이아웃을 공유하는 경로를 그룹(예: account 및 cart)으로 이동한다. 그룹 외부의 경로는 레이아웃을 공유하지 않는다.(예: checkout)
app --
|
layout.js
(shop) --
|
layout.js
account -- (/account)
|
page.js
cart -- (/cart)
|
page.js
checkout -- (/checkout)
|
page.js
다중 루트 레이아웃 만들기
여러 루트 레이아웃을 만들려면 최상위 layout.js 파일을 제거하고 각 경로 그룹 내에 layout.js 파일을 추가한다. 이것은 완전히 다른 UI 또는 경험을 가진 섹션으로 애플리케이션을 분할하는 데 유용하다. <html> 및 <body> 태그는 각 루트 레이아웃에 추가해야 한다.
app --
|
(marketing) --
|
layout.js
...
(shop) --
|
layout.js
...위의 예에서 (marketing)과 (shop) 모두 고유한 루트 레이아웃을 가진다.
'Next.js' 카테고리의 다른 글
| Next.js 11-6 Routing Loading UI and Streaming (0) | 2023.05.25 |
|---|---|
| Next.js 11-5 Routing Dynamic Routes (0) | 2023.05.24 |
| Next.js 11-3 Routing Linking and Navigating (0) | 2023.05.23 |
| Next.js 11-2 Routing Pages and Layouts (1) | 2023.05.19 |
| Next.js 11-1 Routing Fundamentals (0) | 2023.05.18 |
