Next.js 14 프로젝트 규모에 따른 디렉토리 구조

프로젝트를 시작하다보면 어떤 프로젝트 구조로 개발을 할지 고민을 하게 됩니다. 정해진 규칙은 없기 때문에 정답은 없지만, 본 글에서는 제가 개발하면서 유지보수하기 편했던 디렉토리 구조를 설명합니다.

 

소규모 & 중간규모 프로젝트

작은 규모의 프로젝트일 수록 디렉토리 구조는 단순하게 가져가는 것이 좋았습니다. 그래서 depth는 최대한으로 줄이고 컴포넌트, api, hook, 유틸리티 함수 등으로 디렉토리를 구분하였습니다.

my-app/
│
├── src/                     
│   ├── components/             # 재사용 가능한 컴포넌트
│   │   ├── common/             # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등)
│   │   └── BlogContainer       # 블로그 컨테이너 컴포넌트
│   │       ├── index.tsx           
│   │       ├── BlogContainer.tsx   
│   │       └── BlogContainer.stories.tsx
│   │
│   ├── store/                  # 전역 상태 관리 (예: Context API, Redux, recoil, zustand 등)
│   │
│   ├── app/                    # Next.js app 라우팅
│   │   └── page.tsx         
│   │   └── layout.tsx       
│   │
│   ├── api/                    # api와 관련된 로직
│   │
│   ├── hooks/                  # 커스텀 React 훅
│   │
│   ├── constants/              # 상수 값
│   │
│   ├── types/                  # 타입 (typescript 사용시)
│   │  
│   ├── styles/                 # 스타일 관련 파일(CSS, Tailwind 설정 등)
│   │  
│   └── utils/                  # 유틸리티 함수
│
...생략

 

대규모 프로젝트

소규모/중간규모 프로젝트에 features 디렉토리를 추가하여 구성했습니다. 각 기능(feature)별로 해당 기능과 관련된 컴포넌트, api, 상태 관리 로직, 유틸리티 함수 등을 모아둡니다.

my-app/
│
├── src/                     
│   ├── features/            # 기능별 모듈 디렉토리
│   │   ├── auth/            # 인증 기능 (로그인, 회원가입 등)
│   │   │   ├── components/  # 인증 관련 컴포넌트
│   │   │   ├── hooks/       # 인증 관련 커스텀 훅
│   │   │   ├── api/         # 인증 관련 api
│   │   │   ├── pages/       # 인증 관련 페이지
│   │   │   ├── types/       # 인증 관련 타입 (typescript 사용시)
│   │   │   ├── constants/   # 인증 관련 상수 값
│   │   │   └── utils/       # 인증 관련 유틸리티 함수
│   │   │
│   │   ├── blog/            # 블로그 기능
│   │   │   ├── components/  # 블로그 관련 컴포넌트
│   │   │   ├── hooks/       # 블로그 관련 커스텀 훅
│   │   │   ├── api/         # 블로그 관련 api
│   │   │   ├── pages/       # 블로그 관련 페이지
│   │   │   ├── types/       # 블로그 관련 타입 (typescript 사용시)
│   │   │   ├── constants/   # 블로그 관련 상수 값
│   │   │   └── utils/       # 블로그 관련 유틸리티 함수
│   │   │
│   │   └── [other features] # 다른 기능들
│   │
│   ├── app/                 # Next.js app 라우팅
│   │   └── page.tsx         # features 내부의 pages와 연결
│   │   └── layout.tsx       
│   │
│   ├── components/          # 전역에서 사용되는 재사용 가능한 컴포넌트
│   ├── hooks/               # 전역에서 사용되는 커스텀 훅
│   ├── api/                 # 전역에서 사용되는 api
│   ├── utils/               # 전역 유틸리티 함수
│   ├── types/               # 전역에서 사용되는 타입 (typescript 사용시)
│   ├── constants/           # 전역에서 사용되는 상수 값
│   ├── store/               # 전역 상태 관리 (예: Context API, Redux, recoil, zustand 등)
│   └── styles/              # 전역 스타일
│
...생략

 

프로젝트를 구성하는 방식에는 정답은 없습니다. 제가 소개드린 구조보다 더 좋은 디렉토리 구조도 있을테니 참고만 하시고 팀 혹은 개인에 맞는 디렉토리 구조를 정하면 될거 같습니다.