Next.js Route Groups

Next에서는 폴더명을 통해 라우팅을 관리할 수 있다. 이를 통해서 편하게 레이아웃을 관리할 수도 있고, 중첩 라우팅을 쉽게 관리할 수 있다. 하지만 다음과 같은 경우에는 어떻게 해야할까?

(A,B,C,D 페이지) : X 레이아웃 (E,F,G 페이지) : Y 레이아웃

Next는 layout을 이용해서 하위 페이지에 쉽게 일괄적으로 레이아웃을 적용할 수 있지만, 라우팅 별로 다른 레이아웃을 적용하려면 다소 번거로워 진다. 매번 주소값으로 어떤 레이아웃을 적용할 지 판단할 수도 없는 노릇이다. 다행히도 Next에는 Route Groups 라는 기능이 있다.

문제점

app router 기준으로, Next에서 app 폴더 하위에 폴더를 생성하면 그대로 폴더명이 라우팅 주소가 된다.

app
├── search
│   └──[slug] // /search/[slug]
├── bookmark // /bookmark
└── layout.tsx // 공통 레이아웃

위처럼, 폴더 명으로 라우팅을 손쉽게 할 수 있다. 또, layout으로 명명된 파일은 하위 경로의 레이아웃을 손쉽게 지정할 수 있게 한다. 그러나, A,B,C,D 페이지는 X 레이아웃으로, E,F,G는 Y 레이아웃으로 지정하려면 어떻게 해야 할까?

예를 들어, 다음과 같은 방법을 생각할 수 있다.

// layout.tsx
 
'use client';
// ... import
 
export default function DefaultLayout({children}:{children:ReactNode}){
	const pathname = usePathname();
	return (
		<div>
			{getLayoutGroup(pathname) === 'group x'? // pathname으로 그룹 판별
				<LayoutX>
					{children}
				</LayoutX> :
				<LayoutY>
					{children}
				</LayoutY>
			}
		</div>
	)
}

한 눈에 보기에도 복잡하고 불편하며, 확장성이 낮아 보인다. 또 usePathname을 사용하기 위해 client component로 선언해야 하는 것도 단점이다.

혹은 폴더를 추가로 만드는 방법을 생각할 수 있겠다.

app
├── X
│   ├─ A
│   ├─ B
│   ├─ C
│   ├─ D 
│   └─ layout.tsx
└── Y
    ├─ E
    ├─ F
    ├─ G
    └─ layout.tsx

아까보다 낫지만, 여전히 문제가 있다. 바로 X와 Y라는 불필요한 경로가 추가된다는 것이다. 그리고 이런 문제는 Route Groups를 이용해 간단히 해결할 수 있다.

Route Groups

app
├── (X)
│   ├─ A
│   ├─ B
│   ├─ C
│   ├─ D 
│   └─ layout.tsx
└── (Y)
    ├─ E
    ├─ F
    ├─ G
    └─ layout.tsx

Route Groups를 사용하는 법은 간단하다. [slug]를 사용하듯이 폴더명에 괄호를 씌워주는 것으로 끝이다.

엥? 이게 끝이라고? 그렇다. 끝이다. 거창하게 설명했지만 단순히 괄호를 씌워주는 것으로 하위 경로는 그룹화 된다. 따라서 (X)하위의 layout과 (Y)하위의 layout이 다르게 적용된다.

주의 사항

간편한 방법으로 경로를 그룹화 할 수 있는 기능이지만 몇 가지 주의 사항이 존재한다.

서로 다른 루트 레이아웃을 사용하는 경로 사이로 이동하면, 전체 페이지가 다시 로드 됩니다. 단 이는 여러 개의 루트 레이아웃이 존재하는 경우에만 적용됩니다.

첫 번째 주의 사항으로 경로를 이동할 때, 두 페이지에서 사용하는 루트 레이아웃이 다르다면 페이지 전체가 다시 로드 된다.

같은 경로가 존재해서는 안됩니다.

위의 예시로 들면, (X) 하위에 A 가 있는데, (Y) 하위에도 A가 있으면 안된다는 의미이다. 둘 다 /A로 경로가 동일하게 적용되고, 에러가 발생하게 된다.

만일 top-level 레이아웃 없이 여러 개의 루트 레이아웃을 사용하는 경우, 홈 경로가 Route Groups 중 하나에 속하도록 하십시오.

만일 / 경로에 적용될 top-level 레이아웃, 즉 app폴더 바로 하위에 layout이 없는 상태로 여러 개의 그룹 별 루트 레이아웃을 사용하게 될 경우, /경로에 해당하는 페이지가 반드시 특정 Route Group에 속해야 함을 의미한다.

참고 자료

Next.js - Route Groups