📚 Reference

• 공식 문서 1
• GitHub 1
• GitHub 2
• GitHub 3
• GitHub 4
• 참고 자료 1
• 참고 자료 2
• 참고 자료 3
• 참고 자료 4
• 참고 자료 5

📜 Chapter

Page Router

‣

‣

‣

‣

‣

App Router

예시 1

• Next.js는 app/ 디렉토리가 라우팅을 담당하므로, 비즈니스 로직과 UI 컴포넌트는 별도의 폴더로 분리하는 것이 깔끔하다.

my-next-app/
├── src/
│   ├── app/                # 라우팅 및 페이지 (layout.tsx, page.tsx)
│   ├── components/         # 재사용 가능한 UI 컴포넌트
│   │   ├── common/         # Button, Input 등 공통 컴포넌트
│   │   └── layout/         # Header, Footer 등 레이아웃 전용
│   ├── hooks/              # 커스텀 훅 (useAuth, useFetch 등)
│   ├── services/           # API 호출 로직 (Axios 인스턴스 등)
│   ├── store/              # 상태 관리 (Zustand, Redux 등)
│   ├── types/              # TypeScript 타입 정의
│   ├── utils/              # 순수 함수 (날짜 계산, 포맷팅 등)
│   └── constants/          # 상수 관리 (API_URL, ERROR_MESSAGES)
├── public/                 # 이미지, 폰트 등 정적 파일
└── next.config.js

예시 2

.
├── app/                        # App Router의 루트 (Next.js의 entry point)
│   ├── layout.tsx             # 전체 앱 레이아웃
│   ├── page.tsx               # 루트 페이지
│   ├── (routes)/              # 라우팅 그룹 ex. (auth), (marketing)
│   │   ├── dashboard/
│   │   │   ├── page.tsx
│   │   │   └── layout.tsx
│   │   └── settings/
│   │       └── page.tsx
│   └── api/                   # Route handlers (API)
│       └── ...
│
├── entities/                  # 도메인 단위 모델 (ex. user, post)
│   └── user/
│       ├── model/             # 상태관리, hooks (e.g. useUser)
│       ├── ui/                # UI 컴포넌트 (e.g. <UserAvatar />)
│       └── lib/               # 유틸성 함수, helpers
│
├── features/                  # 독립적인 사용자 기능 단위 (ex. login, comment)
│   └── auth/
│       ├── model/             # 상태관리, 인증 관련 hooks
│       ├── ui/                # UI 컴포넌트 (e.g. <LoginForm />)
│       └── lib/               # 인증 관련 로직
│
├── shared/                    # 여러 곳에서 재사용되는 컴포넌트/로직
│   ├── ui/                    # 공통 UI 컴포넌트 (Button, Modal 등)
│   ├── lib/                   # 유틸 함수 (e.g. formatDate, fetcher 등)
│   ├── config/                # 환경 설정
│   └── types/                 # 전역 타입 정의
│
├── widgets/                   # 큰 UI 컴포넌트 (기능 묶음 단위)
│   └── header/
│       ├── ui/
│       └── model/
│
├── processes/                 # 여러 기능을 묶은 사용자 플로우
│   └── onboarding/
│       ├── ui/
│       └── model/
│
├── public/                    # 정적 파일
├── styles/                    # 전역 스타일
├── middleware.ts             # 미들웨어 (ex. 인증, locale 등)
├── next.config.js
└── tsconfig.json

• FSD