#16. Route groups

Next.js(App Router)에서 Route Group는 폴더 이름을 괄호로 감싼 (groupName) 형태로 만들고, 그 폴더는 정리용(조직화용) 이라서 URL 경로에 포함되지 않게 하는 규칙이에요. Next.js+1

---

1) 기본 규칙: (폴더명)은 URL에 안 들어감

예를 들어:

app/
  (site)/
    login/
      page.tsx

위 구조의 실제 URL은 /login 입니다. (site)는 라우트 URL 세그먼트로 취급되지 않아요. Next.js+1

Route group 이름은 “의미”가 있는 게 아니라 그냥 정리용 이름이에요. Next.js

---

2) Route Group을 왜 쓰나? (대표 3가지)

A. 라우트를 팀/기능/섹션별로 정리

예: (site) / (partner) / (api) 처럼 “구역”별로 묶어 폴더 구조를 깔끔하게 유지. Next.js+1

B. 같은 URL 레벨인데 “레이아웃”을 다르게

(marketing)과 (shop)처럼 URL은 같은 레벨인데, 그룹별로 layout.tsx를 따로 둬서 서로 다른 레이아웃을 적용할 수 있어요. Next.js

C. 어떤 라우트만 특정 레이아웃 “적용(Opt-in)” 시키기

예를 들어 account, cart만 같은 레이아웃을 쓰고, checkout은 빼고 싶으면:

app/
  (shop)/
    account/
    cart/
    layout.tsx     // account, cart에만 적용
  checkout/

이런 식으로 그룹 안에 넣은 애들만 레이아웃 공유가 가능합니다. Next.js+1

---

3) 주의사항(진짜 많이 밟는 함정)

A. “경로 충돌” 금지

Route group은 URL에 안 들어가니까,

• app/(marketing)/about/page.tsx
• app/(shop)/about/page.tsx

둘 다 URL이 /about 으로 겹쳐서 에러가 납니다. Next.js+1

B. “여러 Root Layout” 만들면 그룹 간 이동이 풀 리로드

app/(shop)/layout.tsx와 app/(marketing)/layout.tsx처럼 서로 다른 root layout을 쓰는 섹션 간 이동은 클라이언트 네비게이션이 아니라 전체 페이지 로드가 발생할 수 있어요. Next.js+1

C. 최상단 app/layout.tsx 없이 여러 root layout이면 / 위치 주의

top-level app/layout.tsx를 없애고 그룹별로 root layout을 쓰는 구조라면, 홈(/) page는 그룹 안에 있어야 해요(예: app/(marketing)/page.tsx). Next.js+1