Next.js 13 / 05. Route Groups

Intro

app 디렉토리에서 중첩된 폴더(nested folder)는 일반적으로 URL Path에 매핑된다. 그러나 폴더를 경로 그룹으로 표시하여 폴더가 경로의 URL Path에 포함되지 않도록 할 수 있다.

이를 통해 URL Path 구조에 영향을 주지 않고 경로 세그먼트와 프로젝트 파일을 논리적 그룹으로 구성할 수 있다.

아래와 같은 경우에 유용하다.

사이트 영역, 의도, 팀별로 경로를 그룹으로 만들때.
동일한 경로 세그먼트 수준에서 중첩 레이아웃을 사용할 수 있다.
- 여러 root layouts을 포함하여 동일한 세그먼트에 여러 개의 nested layout 만들기
- 공통 세그먼트의 경로 하위 집합에 layout 추가하기

Convention

그룹핑을 하는 방법은 간단하다. 폴더의 이름을 괄호로 묶어서 만들면 된다. (폴더 이름)

Organize routes without affecting the URL path

(marketing)이나 (product)와 같이 폴더를 구성하면 연관있는 영역끼리 묶을 수 있으면, 각각의 그룹핑은 다른 그룹핑에 영향을 미치지 않는다.

Opting specific segments into a layout

그룹핑으로 만든 영역에 layout.js를 추가하여 해당 그룹핑에 layout을 추가할 수 있다. 그룹핑의 한 단계 위에 추가를 한다면 하위의 모든 그룹핑에 영향을 미치지만 그룹핑 폴더안에서 만들게 되면 영역이 제한되는 것이다.

Creating multiple root layouts

root layout을 여러 개 만들려면 최상위 layout.js을 제거하고 각 경로 그룹 내에 layout.js 파일을 추가하면 된다. 이는 애플리케이션을 완전히 다른 UI 또는 경험을 가진 섹션으로 분할하는데 유용하다. 각 root layout에 <html> 및 <body> tag를 추가해야한다.

알아두면 유용한 내용.
- 경로 그룹의 이름은 정리를 위한 것 외에는 특별한 의미가 없다. 경로 그룹은 URL 경로에 영향을 주지 않습니다.
- 경로 그룹을 포함하는 경로는 다른 경로와 동일한 URL 경로로 만들어서는 안된다. 예를 들어 경로 그룹은 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js와 (shop)/about/page.js는 모두 /about으로 만들어져서 오류가 발생할 수 있다.
- 최상위 layout.js없이 여러 root layout을 사용하는 경우, home page.js파일은 경로 그룹 중 하나에 정의되어야 합니다 (예: app/(marketing)/page.js 이런 방식은 안된다.).
- 여러 root layout을 탐색하면 client-side navigation과 달리 전체 페이지가 로드된다. 예를 들어 app/(shop)/layout.js를 사용하는 /cart에서 app/(marketing)/layout.js를 사용하는 /blog로 이동하면 전체 페이지가 로드된다. 이는 여러 root layout에만 적용된다.

Reference

Next.js 13 - Route Groups