NextJS 폴더 구조 (pages 폴더 아래에 components)

Question

안녕하세요, 회사 프로젝트 폴더 구조를 잡아야 하는데 궁금한 게 있습니다. 
(NextJS 버전은 12 사용 중)

next.config.js에서 아래의 설정 후 pages 폴더 아래 components를 두는 구조를 사용하시는 분 계실까요?

pageExtensions: [page.tsx, page.ts, page.jsx, page.js]

https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions

아래와 같은 구조가 괜찮다고 판단되어 사용하려고 하는데 어떨지 의견 좀 여쭤보고 싶습니다.

- apps/
--- pages/
----- Main/
------- page.ts
------- component.ts
------- hook.ts
------- test.ts
--- shared-components/
------- Button.ts
------- Input.ts

기존에는 pages 폴더에는 index.js만 두고 components 폴더 아래에 모든 컴포넌트들을 두는 구조로 사용 중인데, 프로젝트의 페이지가 많아지면서 특정 페이지에서만 사용하는 독립적인 컴포넌트들이 많아지다 보니 components 폴더에 있는 파일들이 구분이 잘 안됩니다.

어떤 페이지에서 사용하는 컴포넌트인지, 재사용 가능한 컴포넌트인지 명확한 구분이 어려워서 위와 같은 구조를 고민해보았는데 혹시 실제 비슷하게라도 사용 중인 곳이 있는지 궁금합니다.

components 폴더 아래 page 별로 구분할 수도 있지만, 독립적인 컴포넌트는 page.ts와 같이 있는 게 조금 더 유지보수면에서 편할 것 같아 고민해보았습니다. 더 좋은 의견이 있다면 환영입니다.

어떤 폴더 구조를 사용하고 계시는지, 추천할만한 구조가 있다면 꼭 의견 부탁드리겠습니다!

손정현 · Answer

안녕하세요!

오 이런 기능이 있었군요? 새로운 것 하나 배워갑니다!

프로젝트 구조는 정답이 없는 것 같아요. 프로젝트와 팀이 성장해나가면서 지속적으로 더 좋은 방향으로 끌고가야하지 않을까 싶어요.

저는 components 폴더 아래 page 별로 구분하는 방식의 프로젝트 구조를 가진 서비스를 개발하고 있지만 질문자님이 올려주신 방법도 꽤 괜찮다고 생각합니다.

한가지 피드백을 드리자면 프로젝트가 커지면서 shared-components의 기준이 뭔가 애매해질 여지가 있는 것 같아서 어떤 컴포넌트들이 해당 디렉토리에 들어가는지 기준을 잘 잡으면 좋을 것 같아요 :)