Route Groups

app 디렉토리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 Route Group으로 표시하여 해당 폴더가 경로의 URL 경로에 포함되지 않도록 할 수 있습니다.

이를 통해 경로 세그먼트와 프로젝트 파일을 논리적인 그룹으로 구성하면서 URL 경로 구조에 영향을 주지 않을 수 있습니다.

Route Groups는 다음과 같은 경우에 유용합니다:

URL 경로에 영향을 주지 않고 경로를 그룹화합니다. 예: 사이트 섹션, 의도 또는 팀별로 그룹화.
동일한 경로 세그먼트 레벨에서 중첩 레이아웃을 활성화합니다:
- 동일한 세그먼트에서 여러 중첩 레이아웃 생성, 여러 루트 레이아웃 포함
- 공통 세그먼트의 일부 경로에 레이아웃 추가

Convention

Route Group은 폴더 이름을 괄호로 묶어 생성할 수 있습니다: (folderName)

Examples

Organize routes without affecting the URL path

URL에 영향을 주지 않고 경로를 구성하려면 관련 경로를 함께 유지하기 위해 그룹을 만듭니다. 괄호 안의 폴더는 URL에서 생략됩니다 (예: (marketing) 또는 (shop)).

(marketing) 및 (shop) 내부의 경로는 동일한 URL 계층 구조를 공유하지만, 각 그룹 내에 layout.js 파일을 추가하여 각 그룹에 대해 다른 레이아웃을 생성할 수 있습니다.

Opting specific segments into a layout

특정 경로를 레이아웃에 선택하려면 새로운 Route Group (예: (shop))을 만들고 동일한 레이아웃을 공유하는 경로를 그룹으로 이동합니다 (예: account 및 cart). 그룹 외부의 경로는 레이아웃을 공유하지 않습니다 (예: checkout).

Creating multiple root layouts

여러 루트 레이아웃을 만들려면 최상위 layout.js 파일을 제거하고 각 Route Group 내부에 layout.js 파일을 추가합니다. 이는 완전히 다른 UI나 경험을 제공하는 섹션으로 애플리케이션을 분할하는 데 유용합니다. 각 루트 레이아웃에는 <html> 및 <body> 태그가 추가되어야 합니다.

위 예제에서는 (marketing)과 (shop) 모두 자체 루트 레이아웃을 가지고 있습니다.

Good to know:

Route Group의 이름은 조직 외에는 특별한 의미가 없습니다. URL 경로에 영향을 주지 않습니다.

Route Group을 포함하는 경로는 다른 경로와 동일한 URL 경로로 해결되어서는 안 됩니다. 예를 들어, Route Group이 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js와 (shop)/about/page.js는 모두 /about으로 해결되어 오류를 일으킵니다.

최상위 layout.js 파일 없이 여러 루트 레이아웃을 사용하는 경우, 홈 page.js 파일은 Route Group 중 하나에 정의되어야 합니다. 예: app/(marketing)/page.js.

여러 루트 레이아웃 간의 내비게이션은 전체 페이지 로드를 유발합니다 (클라이언트 측 내비게이션과 반대). 예를 들어, app/(shop)/layout.js를 사용하는 /cart에서 app/(marketing)/layout.js를 사용하는 /blog로 내비게이션하는 경우 전체 페이지 로드가 발생합니다. 이는 오직 여러 루트 레이아웃에 적용됩니다.

Redirecting Colocation