Next.js를 학습하면서 기본적인 개념에 대해서는 지난 블로그 글에서 썼지만, 이번 글에서는 실제로 개인 포트폴리오 웹사이트 프로젝트에 적용해보며 문제를 해결했던 경험, 새로운 기능을 찾아서 사용했던 경험 등을 정리해서 작성해보려고 한다. 기본 개념을 글을 읽으며 학습만 하는 것과, 직접 적용해보면서 하는 것은 또 천차 만별이기에, 이 경험을 좀 더 깊게 숙지하고 다음 프로젝트에서도 더욱 쉽게 참고할 수 있는데 도움이 될 것 같아서 정리하게 되었다.
Route Groups이란?
앞서 배웠다 싶이, 일반적으로 Next.js에서는 폴더가 곧 url segment가 된다. 그런데 이 Next.js의Route Groups 기능은 폴더를 만듦에도, 그 폴더가 url segment가 되는 것을 막는 기능이다.
이 기능은 새로운 url segment를 만들지 않으면서도 서로 연관된 폴더들끼리 조직하는 데 사용할 수 있다. 또한, 폴더가 url segment가 되지 않음을 이용하여 같은 url path에 위치하지만 서로 다른 layout을 가지는 그룹을 여러개 만들 수 있다.
예를들어, 두 개의 루트 레이아웃을 만들기 위해 app의 가장 상위에 두 개의 Route Groups를 생성하고 각각에서 루트 layout.tsx를 만들어 시작점을 다르게 할 수 있다. 하지만, 중요한 것은 같은 url path를 공유하면서 page는 두 개를 가질 수 없으니, 한 Route groups에서만 page.tsx를 만들어 홈 route를 구성할 수 있다.
실제 사용기
위의 폴더구조는 진행했던 프로젝트 폴더구조이다.
기본적으로 app 폴더 가장 상위에 layout.tsx와 page.tsx를 생성해 홈페이지를 구성하는데, 나는 그것을 지우고 Route group을 두 개 만들어 두 개의 root layout을 구성했다. 이유는 페이지마다 다른 헤더를 쓰고 싶었는데, 루트 layout을 한 개만 생성하고 그 파일에 헤더를 넣으면 모든 페이지에서 해당 헤더가 똑같이 렌더링 되기 때문이었다.