[next.js 13] 폴더 구조를 고민해보자: 컴포넌트는 어디에??

약 2달간 next.js 13 버전을 사용해 회사의 신규 서비스를 개발하였다.

우선 기획이 나온 대부분의 기능과 주요 QA를 끝난 지금, 미루고 미뤄왔던 일들을 조금씩 해나가는 중이다.

TODO 중 하나였던 폴더구조를 어떻게 가져갈지 고민하고 정리한 내용을 기록한다.

 

1. 개발환경

next.js의 13버전을 사용하고 있고, src 폴더도 사용하고 있다.

css는 tailwind를 사용하고 있어 global.css 파일 외에 따로 관리하는 css 파일은 없다.

 

2. 고민한 내용들

🤔 컴포넌트는 어디에??

가장 고민이 된 부분은 컴포넌드를 어디에 둘 것인지 였다.

next.js 13은 app router를 사용하기 때문에 app 폴더 아래 page들이 위치한다.

그래서 처음에 생각했던 위치는 page에서 사용하는 components들은 page와 가까운 곳에 위치시키자는 것이었다.

 

예를 들어 /auth 페이지에서 사용하는 컴포넌트는 /app/auth/components에,

/subscription 페이지에서 사용하는 컴포넌트들은 /app/subscription/components에 모아두는 식이었다.

 

src
 ┣ api
 ┣ app
 ┃ ┣ api
 ┃ ┣ auth
 ┃ ┃ ┣ components ## /auth page에서 사용하는 컴포넌트는 여기
 ┃ ┣ components ## /에서 사용하는 컴포넌트는 여기 ---> 그러면 공통 컴포넌트는?? 
 ┃ ┣ subscription
 ┃ ┃ ┣ components ## /subscription page에서 사용하는 컴포넌트는 여기
 ┃ ┗ page.tsx
 ┣ constants
 ┣ hooks
 ┣ service
 ┣ types
 ┣ utils

 

그런데 이렇게 모아놓고 나니, 새로운 고민거리가 생겼다.

현재 /페이지가 있어서 /페이지에서 사용하는 컴포넌트들은 /app/components 안에 위치하는데, 이렇게 하고나니 공통으로 사용하는 공통 컴포넌트가 애매해졌다.

개발하면서 우선 /app/components 안에 넣고 나니 /페이지에서 쓰는 컴포넌트와 구분이 어려웠다.

 

또 프로젝트 사이즈가 커지면서 /app 폴더 안에 icon 파일, loading 페이지 등 각종 nextjs 파일들이 들어가면서 /app가 복잡해졌다.

 

컴포넌트 파일은 /app과 분리하자❗️❗️

 

고민 끝에, 컴포넌트 파일들은 모두 /app과 분리하기로 했다.

 

레퍼런스를 찾아보다가 nextjs 파일은 /app에, 그 외 파일들은 그 바깥에 분리해서 정리한다는 의견을 봤는데, 공감이 많이 되었다.

next.js를 사용하고 있는 이상 규칙에 따라야 하는 파일들은 개발자가 마음대로 위치를 변경하거나 이름을 바꾸는데 제약이 있다.

또, /app 폴더의 사이즈가 너무 커지만 전체적인 라우팅 구조를 파악하기 어렵다고 느꼈다.

아직은 프로젝트 사이즈가 아주 크지 않지만, 앞으로 확장될 가능성을 생각하면 미리 분리하는게 더 나은 방법이라고 생각했다.

 

그래서 next와 직접 관련된 파일들은 모두 /app에 모아놓고 그 외의 모든 파일들은 /app 바깥에 위치시켰다.

(hooks의 위치도 고민했는데, hook도 역시 /app 바깥에 위치하도록 했다.)

 

또, 컴포넌트를 사용하는 page.tsx와 함께 위치시키는건 이후 다시 폴더 구조가 변경될 가능성이 크다고 생각했다.

컴포넌트들이 어느 page에 위치할지는 기획/디자인 변경에 따라서 계속 변경될 가능성이 높기 때문에 아에 page 경로와 상관없이 분리하는 것이 이후 관리에도 더 나을 것 같다.

 

(단, page.tsx에서 client/server component를 분리하거나, 하나의 페이지만 다른 성격의 페이지가 결합하는 것으로 보여지는 경우 등에서 사용하는 **Page 컴포넌트들은 다른 컴포넌트들보다 page.tsx에 가까워 같은 경로에 위치시켰다.)

 

src
 ┣ api
 ┣ app
 ┃ ┣ api
 ┃ ┣ auth
 ┃ ┣ subscription
 ┃ ┣ favicon.ico
 ┃ ┣ globals.css
 ┃ ┣ layout.tsx
 ┃ ┣ loading.tsx
 ┃ ┣ manifest.ts
 ┃ ┣ not-found.tsx
 ┃ ┣ opengraph-image.png
 ┃ ┗ page.tsx
 ┣ components  ##컴포넌트는 모두 여기에!
 ┃ ┣ common
 ┃ ┃ ┣ buttons
 ┃ ┃ ┣ icons
 ┃ ┃ ┣ layout
 ┃ ┃ ┣ modals
 ┃ ┃ ┣ settingMenu
 ┃ ┃ ┣ toasts
 ┃ ┃ ┣ wrappers
 ┃ ┗ domain
 ┃ ┃ ┣ auth
 ┃ ┃ ┣ chat
 ┃ ┃ ┣ introduction
 ┃ ┃ ┣ segment
 ┃ ┃ ┗ subscription
 ┣ constants
 ┣ hooks
 ┣ service
 ┣ types
 ┣ utils

 

컴포넌트 내의 폴더구조도 고민했는데, 우선 일반적으로 사용하는 /common과 특정 도메인에 사용하는 /domain을 분리하고 그 안에서 다시 폴더를 나누는 식으로 구분하였다.

---

 

가장 큰 고민은 컴포넌트였고, 이 외에도 산발적으로 분포하고 있던 파일들도 성격에 맞게 다시 정리해주었다.

결제나 Google analytics 처럼 순수 로직만 처리하는 파일들은 service로 묶어주었다.

 

커스텀 훅의 경우 현재 /hooks에 다 모여있는데, 어떻게 관리해야할지 고민이다.

특정 domain과 관련된 로직도 있고, common하고 쓰고 있는 훅도 있어서 컴포넌트처럼 common/domain으로 나누는 것도 생각중인데, 이렇게 되면 components / hooks으로 먼저 시작하는게 아니라 common과 domain으로 구분하고 그 아래에 components / hooks으로 구분하는 것도 괜찮을 것 같다.

 

 

팀에서 혼자 웹 프론트를 개발하다보니 같이 고민을 나눌 사람이 없어서 슬프다😂

그래서 react / next는 커뮤니티가 커서 참고할 자료가 많아서 좋다!

(혹시 비슷한 고민을 하거나, 다른 의견이 있다면 공유해보아요🙏)