Next.js

라우트 그룹 활용하기

App Router의 강력함은 단순히 URL 경로를 파일 시스템으로 매핑하는 것을 넘어, 개발자가 더 유연하고 체계적으로 라우트 구조를 관리할 수 있도록 지원하는 데 있습니다. 그 중심에 있는 기능 중 하나가 바로 라우트 그룹(Route Groups)입니다.

URL에는 드러내지 않을 레이아웃 경계를 나누고, 라우트 그룹으로 화면 구조를 정리하는 기준을 설명합니다.

라우트 그룹 설계 흐름

1

라우트 그룹 개념

라우트 그룹은 폴더 이름을 괄호(())로 감싸서 정의합니다.

2

라우트 그룹 활용 실습

대시보드 영역을 별도 route group으로 묶어 URL에는 드러나지 않는 레이아웃 경계를 만듭니다.

3

라우트 그룹별 독립적인 레이아웃 적용

`(marketing)`과 `(dashboard)`처럼 그룹을 나누면 같은 app 트리 안에서 서로 다른 layout을 적용할 수 있습니다.

4

주의사항

동일한 URL 세그먼트를 가진 여러 라우트 그룹을 만들 수도 있습니다.