반응형

6. 라우트 그룹(Route Groups)

app 디렉토리에서, 중첩된 경로는 일반적으로 URL 경로에 매핑된다.
그러나 라우트 그룹을 사용하면 폴더를 URL 경로에 포함시키지 않고도 프로젝트를 논리적으로 구성할 수 있다.
라우트 그룹은 다음과 같은 경우에 유용하다.

  • 사이트 section, 목적, 또는 팀별로 라우트 그룹화
  • 동일한 경로 세그먼트 수준에서 중첩된 레이아웃 활성화
    • 동일한 세그먼트 내에서 여러 개의 중첩 레이아웃(nested layouts) 생성 (여러 개의 루트 레이아웃 포함)
    • 공통 세그먼트 내 일부 라우트에만 특정 레이아웃 추가
  • 공통 세그먼트 내 특정 라우트에 로딩 스켈레톤 추가

URL 경로에 영향을 주지 않고 라우트를 구성하는 방법

라우트를 URL 경로에 영향을 주지 않으면서 구성하려면, 관련된 라우트들을 그룹으로 묶으면 된다. 이때 괄호로 묶은 폴더(예: (marketing), (shop))는 URL에 포함되지 않는다.

(marketing), (shop) 폴더 내의 라우트들은 동일한 URL 계층을 공유하지만, 각 그룹 내부에 layout.js 파일을 추가하여 서로 다른 레이아웃을 적용할 수 있다.

app
 ├── (marketing)
 │    ├── layout.js  # marketing 전용 레이아웃
 │    ├── about
 │    │    ├── page.js  # /about
 │    └── contact
 │         ├── page.js  # /contact
 ├── (shop)
 │    ├── layout.js  # shop 전용 레이아웃
 │    ├── cart
 │    │    ├── page.js  # /cart
 │    ├── account
 │    │    ├── page.js  # /account
 │    └── checkout
 │         ├── page.js  # /checkout
 ├── layout.js  # 기본 레이아웃
 ├── page.js  # /

이 경우, marketing과 shop 내부의 라우트는 각각 다른 레이아웃을 사용할 수 있다.

특정 경로만 특정 레이아웃에 포함시키기

특정 경로만 특정 레이아웃을 사용하도록 하려면, 별도의 라우트 그룹을 만들어 해당 경로들을 이동시키면 된다.
예를 들어, account와 cart는 shop 레이아웃을 공유하지만, checkout은 다른 레이아웃을 사용하도록 설정할 수 있다.

app
 ├── (shop)
 │    ├── layout.js  # shop 전용 레이아웃
 │    ├── account
 │    │    ├── page.js  # /account
 │    ├── cart
 │    │    ├── page.js  # /cart
 ├── checkout
 │    ├── page.js  # /checkout (shop 레이아웃을 사용하지 않음)

특정 경로에서만 로딩 스켈레톤 적용

특정 경로에서만 loading.js(로딩 스켈레톤)를 적용하려면, 해당 경로를 라우트 그룹으로 묶고 loading.tsx 파일을 해당 그룹 내에 배치한다.

app
 ├── (dashboard)
 │    ├── (overview)
 │    │    ├── loading.tsx  # overview에서만 로딩 적용
 │    │    ├── page.tsx  # /dashboard/overview
 │    ├── page.tsx  # /dashboard

이렇게 하면 loading.tsx는 /dashboard/overview 경로에만 적용되고, 다른 dashboard 페이지에는 적용되지 않는다.

다중 루트 레이아웃 생성

애플리케이션을 여러 개의 UI 또는 섹션으로 분리하려면, 최상위 layout.js를 제거하고 각 라우트 그룹에 layout.js를 추가하면 된다.
이 경우, 각 루트 레이아웃 내부에 <html> 및 <body> 태그를 포함해야 한다.

app
 ├── (marketing)
 │    ├── layout.js  # marketing 전용 루트 레이아웃
 │    ├── page.js  # / (홈페이지)
 ├── (shop)
 │    ├── layout.js  # shop 전용 루트 레이아웃
 │    ├── page.js  # /shop

이렇게 하면 marketing과 shop은 각각 독립적인 루트 레이아웃을 갖게 됩니다.

✅ 알아두면 좋은 점 (주의사항)

  1. 라우트 그룹의 이름은 단순히 구조를 정리하기 위한 것일 뿐, URL 경로에 영향을 주지 않는다.
    • 예를 들어 (marketing)/about/page.js와 (shop)/about/page.js는 둘 다 /about URL로 해석되므로 충돌이 발생할 수 있다.
  2. 다중 루트 레이아웃을 사용할 경우, 최상위 layout.js가 없으면 홈 페이지(page.js)는 하나의 그룹 내에 존재해야 한다.
    • 예: app/(marketing)/page.js
  3. 여러 개의 루트 레이아웃 간 탐색 시 전체 페이지가 새로고침(full reload)된다.
    • 예: /cart (app/(shop)/layout.js 사용)에서 /blog (app/(marketing)/layout.js 사용)로 이동하면 전체 페이지가 다시 로드된다.
    • 클라이언트 사이드 네비게이션(client-side navigation)이 아닌 페이지 리로드가 발생한다.

정리

  • 라우트 그룹은 URL 구조를 변경하지 않으면서 프로젝트를 논리적으로 구성하는 방법이다.
  • 괄호(()) 로 감싼 폴더는 URL 경로에 영향을 주지 않는다.
  • 그룹별로 서로 다른 레이아웃을 공유할 수 있다.
  • 중첩된 레이아웃을 통해 특정 그룹 내에서만 적용되는 레이아웃을 설정할 수 있다.
  • 대규모 프로젝트에서 코드 구조를 정리하는 데 유용하다.

-> 라우트 그룹을 활용하면 Next.js 애플리케이션의 유지보수성과 가독성을 높일 수 있다.

 

 

 

https://nextjs.org/docs/app/building-your-application/routing/route-groups

 

Routing: Route Groups | Next.js

Route Groups can be used to partition your Next.js application into different sections.

nextjs.org

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'웹 프로그래밍 > Next.js' 카테고리의 다른 글

[Next.js 공식문서 정리] Routing : 09. Intercepting Routes  (0) 2025.03.29
[Next.js 공식문서 정리] Routing : 08. Parallel Routes  (1) 2025.03.29
[Next.js 공식문서 정리] Routing : 07. Dynamic Routes.md  (0) 2025.03.29
[Next.js 공식문서 정리] Routing : 05. Redirecting  (0) 2025.03.29
[Next.js 공식문서 정리] Routing : 04. Loading UI and Streaming  (2) 2025.03.29
[Next.js 공식문서 정리] Routing : 03. Error Handling  (0) 2025.03.29

티스토리툴바