Next.JS App Router Route Group 사용하기

개요

프로젝트를 진행하는데 카드 페이지의 경로를 /card/${uuid} 로 구현했습니다. (uuid는 summonerName을 검색할 때 임의로 생성합니다.) 그 후 카드를 커스텀할 때 경로를 /card/${uuid}/custom 으로 했습니다.

📁 card
  ├── 📁 [slug]
  │   ├── 📄 layout.tsx
  │   ├── 📄 page.tsx
  │   └── 📁 custom
  │       ├── 📄 layout.tsx
  │       ├── 📄 page.tsx

폴더구조가 위 처럼 구현했는데 문제가 custom이 (slug) 파일 안에 위치하다보니
(slug)의 layout.tsx가 custom의 page.tsx 에도 적용되는 문제가 발생했습니다.
서로 다른 레이아웃이 적용되도록 구현하고 싶었기 때문에 해결해야 했습니다.

해결

공식문서 링크

공식문서를 참고해 route group을 사용했습니다.

주로 사이트 섹션, 의도별로 라우트를 그룹화하고 같은 세그먼트 내에서 여러 루트 레이아웃을 생성하는데 사용되며 URL 경로 구조에는 영향을 주지 않습니다.

그래서 Card/[slug] 아래에 (card)와 (customize)로 그룹화 해주면서 애초 목적이었던 개별 레이아웃 설정과 섹션별로 알기쉽게 나누는 효과를 봤습니다.

📁 card
  ├── 📁 [slug]
  │   ├── 📁 (card)
  │   │     ├── 📄 layout.tsx
  │   │     ├── 📄 page.tsx
  │   └── 📁 (customize)
  │         └── 📁 custom
  │             ├── 📄 layout.tsx
  │             ├── 📄 page.tsx

수정된 파일구조는 위와 같습니다.