앱 디렉토리에서는 중첩된 폴더가 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route 그룹으로 표시하여 해당 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있습니다.
이를 통해 URL 경로 구조에 영향을주지 않고 라우트 세그먼트와 프로젝트 파일을 논리적으로 구성할 수 있습니다.
라우트 그룹은 다음과 같은 경우에 유용합니다:
- 사이트 섹션, 의도 또는 팀별로 경로를 구성 할 때
- 동일한 라우트 세그먼트 수준에서 중첩된 레이아웃을 활성화 할 때
- 여러 루트 레이아웃을 포함하여 동일한 세그먼트에 여러 중첩 레이아웃 만들기
- 특정 세그먼트를 레이아웃으로 선택 할 때
💡 Next.js에서 "의도(Intent)"란 사용자가 애플리케이션에서 수행하려는 작업이나 목적을 나타냅니다. 일반적으로 사용자가 웹 애플리케이션에서 수행하는 작업은 다양한 의도를 가질 수 있습니다. 예를 들어, 사용자가 블로그 페이지를 읽기 위해 방문하는 경우 "blog"라는 의도를 가질 수 있습니다. 또는 사용자가 제품 상세 정보를 보기 위해 방문하는 경우 "product"라는 의도를 가질 수 있습니다.
Next.js에서는 이러한 의도를 기반으로 경로를 구성하고, 각 의도에 대한 적절한 라우팅 및 페이지 처리를 수행합니다. 이를 통해 개발자는 의도에 따라 다른 경로 및 페이지를 구성할 수 있으며, 사용자에게 적합한 콘텐츠를 제공할 수 있습니다.
의도는 일반적으로 Next.js의 라우팅 시스템과 함께 사용되며, 라우트 그룹을 통해 의도별로 경로를 구성하고 관리하는 데 도움이 됩니다.
Convention
라우트 그룹은 폴더 이름을 괄호로 묶음으로써 생성할 수 있습니다: (folderName)
Examples
URL 경로에 영향을 주지 않고 라우트 구성
URL에 영향을 주지 않고 라우트를 구성하려면 그룹을 만들어 관련 라우트를 함께 유지합니다. 괄호 안의 폴더는 URL에서 생략됩니다(예: (marketing) 또는 (shop)).
(marketing) 및 (shop) 내부의 경로가 동일한 URL 계층 구조를 공유하더라도 폴더 내에 layout.js 파일을 추가하여 각 그룹에 대해 다른 레이아웃을 생성할 수 있습니다.
특정 세그먼트의 레이아웃을 선택하는 방법
특정 라우트를 레이아웃으로 선택하려면 새 라우트 그룹(예: (shop))을 만들고 동일한 레이아웃을 공유하는 라우트를 그룹(예: account 및 cart)으로 이동합니다. 그룹 외부의 라우트는 레이아웃을 공유하지 않습니다(예: 체크아웃).
다중 루트 레이아웃 만들기
여러 루트 레이아웃을 만들려면 최상위 layout.js 파일을 제거하고 각 경로 그룹 내에 layout.js 파일을 추가합니다. 이것은 완전히 다른 UI/UX을 가진 섹션으로 애플리케이션을 분할하는 데 유용합니다. <html> 및 <body> 태그는 각 루트 레이아웃에 추가해야 합니다.
위 그림에서 (marketing)과 (shop) 모두 고유한 루트 레이아웃을 가집니다..
알아두면 좋은 점:
- 라우트 그룹의 이름 지정은 조직화를 위한 것이외에는 특별한 의미가 없습니다. URL 경로에 영향을 주지 않습니다.
- 라우트 그룹을 포함하는 라우트는 다른 라우트와 동일한 URL 경로로 해석되어서는 안 됩니다. 예를 들어, 라우트 그룹은 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js와 (shop)/about/page.js는 모두 /about으로 해석되어 오류가 발생할 수 있습니다.
- 최상위 레이아웃(layout.js 파일)이 없는 상태에서 여러 개의 루트 레이아웃을 사용하는 경우, page.js 파일은 라우트 그룹 중 하나에 정의되어야 합니다. 예를 들어, app/(marketing)/page.js와 같은 형식입니다.
- 여러 개의 루트 레이아웃 간에 탐색할 경우 전체 페이지 로드가 발생합니다(클라이언트 측 탐색이 아님). 예를 들어, app/(shop)/layout.js를 사용하는 /cart에서 app/(marketing)/layout.js를 사용하는 /blog로 이동하는 경우 전체 페이지 로드가 발생합니다. 이는 여러 개의 루트 레이아웃에만 해당됩니다.
느낀점
- 페이지 라우터 방식에서 논리적인 세그먼트를 분리하다 보면 url경로가 길어지는 단점이 있었는데 앱라우터 방식에 있는 라우트 그룹을 사용하면 논리적인 세그먼트와 서비스 URL 경로를 자유롭게 분리 할 수 있어 활용도가 높아 보입니다.
참조 링크
Routing: Route Groups | Next.js
Using App Router Features available in /app
nextjs.org
'기억보단 기록을 > Next JS (App Router)' 카테고리의 다른 글
| [NextJS 13] Routing - Loading UI and Streaming (0) | 2023.06.07 |
|---|---|
| [NextJS 13] Routing - Dynamic Routes (0) | 2023.06.06 |
| [NextJS 13] Routing - Linking and Navigating (0) | 2023.06.03 |
| [NextJS 13] Routing - Pages and Layouts (1) | 2023.05.31 |
| [NextJS 13] Routing - Defining Routes (0) | 2023.05.30 |
