[26] 왜 이러한 폴더 구조를 선택했나요?

[hyeyoonS]

📎 질문

왜 이러한 폴더 구조를 선택했나요?

✏ListyWave

먼저 저희가 사용한 폴더구조는 APP router 을 위한 폴더구조입니다.

• 가장 상단에 src와 public 폴더가 있고

• src 폴더 아래에는

  • app routing 구현을 위한 app폴더
  • 쿼리키나 locale 등 상수를 저장하는 constants
  • hooks, 상수나 타입을 보관하는 lib
  • Nextjs API route를 지원하는 pages/api
  • zustand로 관리하는 커스텀훅을 보관하는 store
  • 글로벌 스타일, 폰트, 테마 등의 CSS파일을 보관하는 style

• public 아래에는 정적 자료들인 폰트, 아이콘, 이미지 파일들을 두었습니다.

특히 app 폴더 아래에는

• 라우팅 대상인 경로/page.tsx 파일들과 해당 페이지에 적용되는 경로/이름.css.ts CSS 파일들이 위치하고
• API 호출을 담당하는 _api와 쿼리클라이언트를 정의해놓은 _context 와 같은 폴더들을 두었습니다. (언더바는 라우팅에 해당 폴더들이 포함되지 않게 하기 위함)

그리고 이런 폴더구조를 사용한 이유는 Next.js 공식문서에서 제안하는 app routing project structure convention을 따르기 위함이었습니다.

✏ MypetLog

• Next14 app router 폴더구조

app 폴더 : 라우팅할 page.tsx와 컴포넌트 파일 public 폴더 : 정적인 icon, image, data styles 폴더 : 글로벌하게 사용될 font, color

app폴더 내부 _api : api파일, axios파일 _components : 공통컴포넌트 라우팅 폴더 내부 _components : 상위 라우팅 페이지에서만 사용하는 컴포넌트

주요 특징

• 폴더의 계층을 줄이기 위해 src를 없애고 바로 app 폴더와 public 폴더, styles 폴더가 존재
• _(언더바)로 표기된 파일들은 알파벳으로 정렬되는 것과 상관없이 최상위에 위치하기 위함
• 라우팅 폴더 간 공통으로 사용할 component는 _components 폴더에서 관리, 한 라우팅에서만 사용하는 component는 라우팅 폴더 내 별도의 components 폴더에서 관리 => 컴포넌트 개수가 많아도 구분이 쉬움
• Next의 route groups는 폴더명을 괄호()로 감싸므로써 라우팅에는 영향을 끼치지 않는 폴더구조입니다. (auth)폴더 내에 login, signin 폴더를 그룹화하여 폴더를 관리했습니다. routing url은 /login (O) /(auth)/login (X)