<Next.js> 14 - app router 구조

프로젝트 폴더 구조

프로젝트 루트
│
├── app
│   ├── layout.tsx                # 모든 페이지에 공통으로 적용되는 레이아웃 파일
│   ├── page.tsx                  # 기본 페이지 컴포넌트
│   ├── [id]                      # 동적 라우트를 처리하는 폴더 (예: /app/123)
│   │   └── page.tsx              # 동적 라우트에 해당하는 페이지 컴포넌트
│   └── api                       # API 라우트
│       └── hello.ts              # 간단한 API 엔드포인트 예시
│
├── components                    # 재사용 가능한 컴포넌트들이 위치하는 폴더
│   └── Header.tsx                # 예시: 헤더 컴포넌트
│
├── hooks                         # 커스텀 훅을 관리하는 폴더
│   └── useAuth.ts                # 인증 관련 커스텀 훅
│   └── useFetch.ts               # 데이터 패칭 관련 커스텀 훅
│
├── lib                           # 유틸리티 함수들이 위치하는 폴더
│   └── api.ts                    # API 호출 유틸리티 함수
│   └── date.ts                   # 날짜 관련 유틸리티 함수
│
├── public                        # 정적 파일들이 위치하는 폴더 (이미지, 폰트 등)
│   ├── images                    # 이미지 파일 폴더
│   │   └── logo.png              # 로고 이미지
│   ├── fonts                     # 웹 폰트 파일
│   │   └── custom-font.woff      # 커스텀 폰트 파일
│   └── favicon.ico               # 파비콘 파일
│   └── sitemap.xml               # 사이트맵 파일 (SEO 관련)
│   └── robots.txt                # 크롤러 접근 제어 파일 (SEO 관련)
│
├── styles                        # 전역 CSS 파일이 위치하는 폴더
│   └── globals.css               # 전역으로 적용되는 CSS 파일
│
├── types                         # 타입스크립트의 타입 정의를 관리하는 폴더
│   └── user.ts                   # 사용자 관련 타입 정의
│   └── api.ts                    # API 관련 타입 정의
│
├── __tests__                     # 테스트 코드가 위치하는 폴더
│   └── Header.test.tsx           # 헤더 컴포넌트에 대한 테스트 파일
│
├── middleware.ts                 # 미들웨어 파일 (예: 인증, 리디렉션 처리)
│
├── .env.local                    # 로컬 개발 환경 변수 파일
├── .env.production               # 프로덕션 환경 변수 파일
│
└── package.json                  # 프로젝트의 의존성 및 스크립트 관리 파일