next.js pages 폴더에 라우팅 관련이 아닌 컴포넌트 파일을 넣는 것은 안티패턴인가요?

Question

안녕하세요. next.js로 프로젝트를 하고 있는데요, 팀원이 작성해준 코드를 보다가 궁금한 점이 생겨서 질문드립니다.

next.js는 파일 기반 라우팅 시스템이어서 pages에 작성한 컴포넌트는 실제로 라우팅이 되는것으로 알고있습니다. login이라는 폴더에 작성한 index.tsx는 login으로 접속할 수 있는데요.

팀원이 login폴더에 라우팅과 관련되지 않은 LoginButton, LoginAuth와 같은 컴포넌트를 한곳에 같이 작성해두었습니다.

이렇게하면 라우팅할때 문제가 되지 않나요? 팀원의견은 같은 역할을하는 코드가 한 폴더에 있으면 관리하기 쉬워서 위와같이 작성했다고 했는데. 저는 실제 path와 연관된 컴포넌트만 pages에 있고, 나머지 컴포넌트는 별도 폴더로 구분해야 한다고 생각합니다.

기준을 어떻게 가져가면 좋을까요.. pages에 라우팅 관련이 아닌 컴포넌트를 넣어도 괜찮나요?

감사합니다.

성원 · Answer

작성자님이 생각하시는 것처럼 next.js는 파일 기반 라우팅 시스템이라서 pages 폴더에는 라우팅 관련 파일들만 위치시키는게 좋습니다.

따라서 page의 목적이 아닌 컴포넌트들은 pages와 같은 계층에 폴더를 두어 나눠서 관리하면 좋습니다. 저는 보통 component라는 폴더를 만들고 기준에 맞추어 폴더나 파일을 구분합니다.
  - pages
     - login
  - component
     - login

팀원분이 말씀하신 부분중에 같은 역할을하는 코드가 한 폴더에 있으면 관리하기 쉽다라는 말도 의미가 있습니다.

실제로 next.js 13에서는 app 폴더가 새로 생기고 라우팅 되는 파일들은 page.js로 네이밍 합니다. 따라서 같은 역할을 하는 코드를 뭉치고 라우팅 파일만 page.js로 만들어서 라우팅 컴포넌트 + 이외 컴포넌를 하나의 폴더에 두는 구조가 가능해집니다.