[Next.js] Next.js 폴더(디렉토리) 구조 템플릿

src.zip

0.01MB

 

설명

src/
│
├── app/                  // 라우터 폴더
│   └── admin/            // /admin 라우터
│       └── page.tsx      // /admin으로 접근 시 렌더링 되는 컴포넌트
│   └── page.tsx          // 루트 라우터
│
├── components/           // 컴포넌트 폴더
│   ├── admin/        	  // admin 페이지에서만 사용하는 컴포넌트
│   │   ├── container/    // core와 view를 합친 컨테이너 컴포넌트(페이지 컴포넌트에서 호출)
│   │   └── core/ 		  // 비즈니스 로직 포함 컴포넌트(ex - 로그인 버튼)
│   │   └── view/         // 단순 뷰 컴포넌트(ex - 둥근 모서리 이미지 컴포넌트)
│   └── ui/         	  // 공통 컴포넌트
│		└── ...
│
├── hooks/           // 컴포넌트 폴더
│   ├── auth/        	  // 인증 관련 훅
│   └── common/           // 공통 훅
│
├── pages/                // 페이지 단위 뷰 컴포넌트 관리
│   ├── admin.tsx         // /admin 라우터에서 호출할 페이지 컴포넌트
│   └── home.tsx       	  // / 루트 라우터에서 호출할 페이지 컴포넌트
│
├── services/             // API 호출(서비스 계층) 모듈
│   ├── auth/        	  // 인증 관련 모듈
│   └── cart/             // 장바구니 관련 모듈
│
├── store/                // 전역 상태 관리 스토어
│   ├── index.ts          // 스토어 매핑 파일
│   ├── authStore.ts      // 인증 상태 스토어
│
├── styles/               // 스타일 파일 관리
│   ├── global.css        // 전역 스타일
│   └── theme.scss        // 테마 관련 스타일
│
├── types/                // TypeScript 타입 정의
│   ├── components/       // 컴포넌트 관련 타입 정의
│   ├── hooks/            // 훅 관련 타입 정의
│   ├── service/          // 서비스 관련 타입 정의
│   └── store/            // 스토어 관련 타입 정의
│
└── utils/                // 유틸리티 모듈 모음
    └── formatDate.ts     // 날짜 포맷팅 모듈