[Next.js] Route System - 4) Route Groups

Routes Groups

앱 폴더의 계층은 URL 경로에 직접 매핑된다. 그러나 Routes Groups를 만들어 이러한 패턴을 벗어날 수 있다. Routes Groups는 다음과 같은 용도로 사용할 수 있다.

• URL 구조에 영향을 주지 않고 경로를 구성한다.
• 레이아웃에 특정한 라우트 세그먼트를 삽입한다.
• 앱을 분할하여 여러개의 루트 레이아웃을 만든다.

Convention

폴더 이름을 (괄호)로 묶어서 Route group을 만들 수 있다.

Organize routes without affecting the URL path

URL에 영향을 주지 않고 라우트를 구성하고 연관있는 라우트들을 함께 유지하기 위해서 그룹을 만듭니다. 괄호안의 폴더는 URL에서 생략됩니다. 각 그룹 내에 layout.js 파일을 추가해서 각 그룹에 대한 다른 레이아웃을 추가할 수 있다.

Creating multiple root layouts

여러개의 root layouts를 만드려면, 최상위의 layout.js파일을 지우고, 각 라우트 그룹에 layout.js파일을 추가한다. 이는 앱이 완전히 다른 UI 또는 경험을 가진 섹션으로 분할하는데 유용하다.

- route group 내의 경로는 동일한 URL 경로가 되지 않아야 한다. 예를 들어, 경로 그룹은 URL 구조에 영향을 주지 않으므로 (marketing)/about/page.js 및 (shop)/about/page.js 모두 /about으로 확인되어 오류가 발생한다.
- muliple root layouts 를 탐색하면 클라이언트 측 navigation 과 달리 전체 페이지가 로드가 발생한다.
예를 들어 app/(shop)/layout.js 를 사용하는 /cart 에서 /app/(marketing)/layout.js 를 사용하는 /blog 로 이동하면 전체 페이지가 로드된다.