최상위 디렉토리들은 애플리케이션의 루트 디렉토리에 위치하며, 애플리케이션의 코드와 정적 자원을 구성하는데 사용된다.
// App Router
project/
├─ app/ // App Router
└─ public/ // 정적 파일을 저장하는 디렉토리
// Pages Router
project/
├─ pages/ // Page Router
└─ public/ // 정적 파일을 저장하는 디렉토리
// src 사용(선택)
project/
├─ public/ // 정적 파일을 저장하는 디렉토리
└─ src/ // 애플리케이션 소스 코드 디렉토리
└─ app/ // App Router
최상위 파일들
project/
├─ next.config.js // NextJS 설정
├─ package.json // 프로젝트 의존성 및 스크립트
├─ instrumentation.ts // 모니터링 설정
├─ middleware.ts // NextJS 미들웨어
├─ .env.local // 로컬 환경 변수
├─ .env.development // 개발 환경 변수
├─ .env.production // 프로덕션 환경 변수
├─ .eslintrc.json // ESLint 설정
├─ .gitignore // Git 제외 파일
├─ next-env.d.ts // NextJS TypeScript 선언
└─ tsconfig.json // TypeScript 설정
App Routing 규칙
app/
├─ A Page
│ ├─ layout.tsx // A 페이지 공통 레이아웃
│ ├─ page.tsx // A 페이지 UI
│ ├─ template.tsx // A 페이지 동적 레이아웃 관리
│ ├─ loading.tsx // A 페이지 로딩 UI
│ └─ error.tsx // A 페이지 에러 UI
├─ B Page
├─ C Page
├─ layout.tsx // 전역 공통 레이아웃
├─ page.tsx // 루트 페이지 UI
├─ template.tsx // 전역 동적 레이아웃 관리
├─ loading.tsx // 루트 페이지 및 하위 페이지 로딩 UI
├─ error.tsx // 루트 페이지 및 하위 페이지 에러 UI
├─ not-found.tsx // 전역 404 페이지
├─ global-error.tsx // 전역 에러 UI
├─ route.ts // API 엔드포인트 정의
└─ default.tsx // 병렬 라우트 폴백 UI
