[NEXTJS]디렉토리 구조 정리

프로젝트를 생성 후 처음으로 하는 세팅 중 하나인 디렉토리 구조 짜기.

매 새로운 프로젝트마다 디렉토리 구조가 조금씩 다른데, 나도 나만의 디렉토리 구조를 하나 정하려고 한다.

크게는 pages, app, public 세개로 나눈다.

 

🗂 app

• api : API 호출을 위한 기능들을 모은다. 인스턴스 설정(axios.tsx), 호출 통합 로직(send.tsx), 호출 함수들
• components : 화면 구성에 재사용되는 컴포넌트를 모은다.
• constants : 공통으로 사용되는 상수들을 정의하고 관리한다. API 엔드포인트 URL(apiEndPoint.tsx), 디자인시스템(theme.tsx), 타입과 인터페이스(types)
• containers : 모든 페이지에 전체적으로 적용되는 레이아웃 컴포넌트를 모은다. 주로 헤더, 푸터, 사이드바와 같은 공통 컴포넌트를 넣는다.
• hooks : 효율을 위해 만든 커스텀 훅을 모은다.(useInput.tsx)
• styles : 전역 스타일(global.scss)과 컴포넌트와 관련된 스타일 모듈(common.scss)를 정의한다.
• utils : 프로젝트 내에서 재사용되는 함수들을 모은다. 현재 시간을 가져오는 함수(getCurrentTime()), 문자열을 자르는 함수(truncateString(str, maxLength)), 날짜 사이의 차이를 계산하는 함수 (calculateDateDifference(startDate, endDate))

🗂 public

• images : 로고, 아이콘, 배경 이미지 등과 같이 사이트의 모든 페이지에서 공통적으로 사용되는 이미지를 모아둔다.

🗂 pages

 

---

https://kknkkm.tistory.com/22

Next JS의 기본과 디렉토리의 구조에 대해서 알아보자!! (feat. pages folder, public folder)