Next.js 14 디렉터리 구조

 

Next.js 뿐만 아니라 개발을 처음 시작할 당시부터 폴더, 컴포넌트 구조 등 아키텍처에 관한 고민들은 항상 많았습니다.

그래서 현재 아트인포의 구조를 정리해보았습니다.

 

my-app/
│
├── components/       # 재사용 가능한 컴포넌트
│   ├── common/       # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등)
│   ├── container     # 컨테이너 컴포넌트 
│   ├── list          # 예: NewsList, JobsList, LessonsList 사용하는 컴포넌트가 적어 하위폴더를 구분 x
│   ├── card          # 예: NewsCard, JobCard, LessonCard 
│   ├── form          # job,lesson 등에 사용되는 form과 sign-in, sign-up, profile 등의 form을 
│						service, user로 하위폴더를 만들어 구분지었다.
│   ├── skeleton 등   
│
├── store/            # 현재는 global state(context, zustand 등)를 사용하지 않아 사용하진 않는다. 추후 필요시 추가예정
│
├── app/              # Next.js app 라우팅
│   ├── page.tsx         
│   └── layout.tsx       
│
├── services/         # api와 관련된 로직.
│   ├── index.ts      # axios instance로 baseUrl, interceptor로 공통 에러처리 등
│   ├── jobs.ts       # 각 페이지별 axios module이 들어 있다.   
│   └── lessons.ts 등
├── hooks/            # 커스텀 React 훅
│
├── interface/        # 각 api에서 사용하는 request의 타입(like DTO).
│
├── types/            # 타입정의 (NEWS, JOB, USER 등)
│  
├── styles/           # 현재는 사용하지 않고 스타일관련 구분이 필요하다면 추가 예정
│  
└── libs/             # util 함수, shema, query key 들을 담아 놓았다.

 

특징로는

 

1. 기능별 명확한 폴더 분리: hooks, services, types 등 각 기능별로 폴더가 명확하게 구분되어 있어, 필요한 코드를 쉽게 찾고 관리할 수 있습니다.

 

2. 용도에 따른 컴포넌트 구분: common, list, card 등 그 용도에 따라 분류되어 있어 직관적인 구별 가능.

 

3. 역할 분리의 명확성: 각 폴더와 파일의 역할이 명확히 구분되어 있어, 코드의 구조를 쉽게 이해할 수 있다.

폴더 구조는 클린코드의 베이스가 되는 부분이라고 생각한다.

 

내가 생각하는 클린코드는 누구나 문서나 주석없이 술술 읽히는 코드이다.

 

깔끔한 코드와 구조의 기본으로는 파일이나 컴포넌트별 명확한 역할 분리라고 생각이 되고 때에따라 

아직 명확하지 않게 코드가 작성될때도 많게 느껴진다.

이 부분을 코드 작성시 제일 중요한점 이라고 생각된다.