Nextjs14 app 기반 폴더/라우팅 구조 만들기

Nextjs14 를 사용하면서 권장하는 폴더 및 라우팅 구조는 기본적으로 App Router 를 기반으로 움직이도록 변경되었습니다.
따라서 많은 폴더 아키텍쳐들이 나오고 있는데, 여러 프로젝트를 시도하고 나서 어느정도 정리된 개인적인 Nextjs14 폴더 구조를 소개할려고 합니다.
해당 구조는 협업을 위한 구조이며, 실제로 실무에서 도입하여 현재 사용하고 있는 폴더 아키텍쳐 입니다.

구조

기본적으로 app 폴더 아래 각 도메인 별로 page.ts, layout.ts, components/, types/, hooks/* 등 각 도메인별 기능들이 한 곳에 묶여서 지원되도록 합니다. 또한, app 폴더와 같은 레벨로 사용될 공통 기능들이 모여있는 common, 다양하게 사용할 수 있는 라이브러리 레벨에 lib 폴더, 그리고 정적 리소스를 관리하는 public 폴더를 두어 아래와 같이 구조를 만듭니다.

project-root/
├── app/
│   ├── domain-1/
│   │   ├── page.ts
│   │   ├── layout.ts
│   │   ├── components/
│   │   │   ├── Component1.tsx
│   │   │   └── Component2.tsx
│   │   ├── types/
│   │   │   └── domain1Types.ts
│   │   └── hooks/
│   │       └── useDomain1Hook.ts
│   └── domain-2/
│       ├── page.ts
│       ├── layout.ts
│       ├── components/
│       │   ├── Component1.tsx
│       │   └── Component2.tsx
│       ├── types/
│       │   └── domain2Types.ts
│       └── hooks/
│           └── useDomain2Hook.ts
├── common/
│   ├── components/
│   │   └── SharedComponent.tsx
│   ├── types/
│   │   └── sharedTypes.ts
│   └── hooks/
│       └── useSharedHook.ts
├── lib/
│   ├── utils.ts
│   └── constants.ts
└── public/
    ├── images/
    │   └── logo.png
    ├── fonts/
    └── favicon.ico

주요 장점

다음과 같이 설계하면 여러 장점들이 생깁니다.

1. 도메인 기반 모듈화 - 각 도메인별로 기능을 명확하게 분리하고, 다른 도메인과의 의존성을 줄입니다.
2. 재사용 가능한 공통 컴포넌트 및 로직 - common 폴더를 사용하여 명확하게 공통화들은 나누도록 합니다.
3. 명확한 파일 구조 - components, hooks, types 등 명확하게 사용할 폴더를 나누기 때문에 유지보수에 용이합니다.
4. 유틸리티 및 상수 관리 - lib 폴더를 만들어서 우리가 사용할 유틸리티, 상수 등에 대한 내용을 별도로 관리하여 프로젝트에 영향이 가지 않도록 합니다.