Route Groups

App 디렉토리에서 일반적으로 중첩된 폴더는 URL 경로와 매핑된다.
Route group을 이용하면 URL에 연결되지 않는 폴더를 만들 수 있다.

Convention

(folderName)

Example

1. 라우트를 URL에 영향 없이 구성하기

경로 그룹의 이름은 정리를 위한 것 외에는 특별한 의미가 없다. URL 경로에는 영향을 미치지 않는다.

따라서 다른 그룹 내에 있더라도, 같은 URL을 가리키는 경우가 발생해 오류가 생길 수 있다.

❌
app
 ㄴ (shirts)
	 ㄴ about
 		ㄴ layout.jsx
    	ㄴ page.jsx   // /about
 ㄴ (pants)
 	 ㄴ about
 		ㄴ layout.jsx
    	ㄴ page.jsx   // /about

ex) (shirts)/about/page.js와 (pants)/about/page.js는 모두 /about 링크를 나타냄

2. 레이아웃에 특정 세그먼트 선택하고 싶다면, route group으로 묶어주기

각각의 폴더에 각자의 layout을 정할 수도 있다.

만약 도메인에 따라 다른 레이아웃을 가져가고 싶다면, route group을 이용해 서로 다른 레이아웃을 가지도록 할 수 있다.

• shirts 관련 페이지의 레이아웃에는 상의 목록이 나타나고, pants 관련 페이지에는 하의 목록이 나타나길 원하는 경우, (shirts)/layout.js 과 (pants)/layout.js 으로 분리해 설정 가능

최상위 위치에 (app/*) layout파일 없이 여러 루트 레이아웃을 사용하는 경우, 메인 페이지 파일은 경로그룹 중 하나에 정의되어야 한다.

❌
app
 ㄴ (shirts)
 	ㄴ layout.jsx
 ㄴ (pants)
 	ㄴ layout.jsx
 ㄴ page.jsx
 
 ✅
 app
 ㄴ (shirts)
 	ㄴ layout.jsx
    ㄴ page.jsx    
 ㄴ (pants)
 	ㄴ layout.jsx

여러 루트 레이아웃을 사용할 때, 레이아웃이 다른 페이지로 이동하는 경우 클라이언트 측 탐색이 아닌 (soft navigation X) 전체 페이지가 새로 로드된다.