Route Groups에 대해서

📌 공식문서

Routing: Route Groups | Next.js

 

📌 이게 뭔가?

일단 나는 nested 되는 레이아웃을 가지고 싶지 않았다.

그리고 1depth 페이지에서는 모두 같은 레이아웃을 가지고 있었다.

이걸 어떻게 적용해야할까 고민하다가 드디어 찾았다.

 

1. Root Layout 설정

일단 내가 지금 혼자 공부하고 있는 프로젝트에서 공통인 부분은

이미지에 표시한 헤더와 푸터이다. 저 부분이 RootLayout이다.

2. 각 메뉴 Sub Layout (?) 설정방법은?

하지만 나의 문제는 각 메뉴(기관소개의 이용안내, ... 등)에 대한 페이지들은 이미지에 표시한 부분이 공통이라는 점이다.

텍스트만 달라진다.

즉 SubLayout이 각 메뉴에 대해서 공통이다. (헤더 푸터 말고도 공통인게 또 있다는 말이다!!!)

 

💩 처음 한 방법 (나쁜방법)

같은 레이아웃이지만 각 폴더에 layout.js 파일을 만들어서 같은 코드를 작성했다... 

솔직히 하면서도 이게 정말 최선의 방법이나?

usePathname을 써서 클라이언트 페이지로 만들어야하나? --> 근데 나는 Next.js를 쓰는건데...?

아래 이미지 좌측의 layout.js를 총 4개를 각 폴더에 만들었다... 멍청이 (공식문서 봐라...)

 

✨ 수정한 방식 (Route Group을 사용해서)

(menu)라는 폴더안에 같은 레이아웃을 쓰는 폴더들을 다 집어넣고 layout.js를 한개만 만들었다.

그랬더니 해당 페이지들에 대해서는 모두 layout.js가 잘 적용되었다.

그리고 url은 (menu)는 안적어도된다.

그냥 바로 localhost:3000/about/~~~ 이렇게 된다.

그리고 관리자 페이지에서는 위에 layout이 필요가 없었는데 그 부분도 해결이되었다.

 

🙋 Route Groups 이란?

URL에 영향을 주지 않고 경로를 구성해 관련 경로를 함께 유지하는 그룹이라고 한다.
괄호안에 폴더는 URL에서 생략이된다.
경로는 생략이 되지만 layout을 공유하는 등의 행위는 적용되는 폴더인 것이다.

 

루트 레이아웃을 각 폴더마다 적용하고 싶을 때는?

여러 루트 레이아웃을 제거하고 괄호 폴더 안에 각각 루트 레이아웃을 만들어주면된다.